lazyload是jquery的插件,做为延迟加载图片,减压服务器压力。javascript
如何使用:html
先把java
<script src="jquery.js" type="text/javascript"></script> <script src="jquery.lazyload.min.js" type="text/javascript"></script>放在body里面
修改html里面的img src为占位符1*1像素灰色的gif代码以下:
<img src="img/grey.gif" data-original="img/bmw_m1_hood.jpg" />
基本处理图片代码以下
$(function(){
$("img[data-original]").lazyload();
})
提早加载图片代码
$("img.lazy").lazyload({ threshold : 600 });数字能够修改
事件触发代码:
事件能够是任何 jQuery 时间, 如: click
和 mouseover
. 你还能够使用自定义的事件, 如: sporty
和 foobar
. 默认状况下处于等待状态, 直到用户滚动到窗口上图片所在位置. 在灰色占位图片被点击以前阻止加载图片, 你能够这样作:jquery
$("img").lazyload({ placeholder : "img/grey.gif", event : "click" });
淡出效果代码:
$("img.lazy").lazyload({ effect : "fadeIn" });
加载隐藏的代码:特别是作选显卡的是老是要隐藏图片这个就要给设置为skip_invisible : false否则就加载不出来
$("img[data-original]").lazyload({skip_invisible : false});
参考英文网站:http://www.appelsiini.net/projects/lazyload