Lazy Load Plugin for jQuery

作者:暗夜星辰 发布于:2012-7-14 16:29 Saturday 分类:HTML & CSS

lazy load 就是 懒惰加载。要告诉它,我需要你啦,它才跑出来。

这个插件,就是浏览器还没有浏览到的图片,都不加载;等滚动条下拉,下面的页面显示了,原来下面页面包含的图片才会被触发加载。

已经有些站用这样的技术了。星辰一直不致力于前端研究,正好晃荡到这个插件的站点。

http://www.appelsiini.net/projects/lazyload

就不翻译了。简单的用用。图片源给个1*1像素的空图,真正的图片路径放到data-original属性里。底部加载jquery和插件js还有简单的插件函数调用。

 

<img src="img/grey.gif" data-original="img/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood"><br/>
<img src="img/grey.gif" data-original="img/bmw_m1_side.jpg" width="765" height="574" alt="BMW M1 Side"><br/>
<img src="img/grey.gif" data-original="img/viper_1.jpg" width="765" height="574" alt="Viper 1"><br/>
<img src="img/grey.gif" data-original="img/viper_corner.jpg" width="765" height="574" alt="Viper Corner"><br/>
<img src="img/grey.gif" data-original="img/bmw_m3_gt.jpg" width="765" height="574" alt="BMW M3 GT"><br/>
<img src="img/grey.gif" data-original="img/corvette_pitstop.jpg" width="765" height="574" alt="Corvette Pitstop"><br/>

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

<script type="text/javascript">
    $("img").lazyload();
</script>

其他还有一些乱七八糟的用法就不多说了。上边的代码足矣。

标签: 前端 Javascript Jquery 懒加载

发表评论:

©2012-2014 woodbunny.com 木头♥兔子的小屋 sitemap