使用方法
引用jquery和jquery.lazyload.js到你的页面
1 2 | < script src = "jquery-1.11.0.min.js" ></ script >
< script src = "jquery.lazyload.js?v=1.9.1" ></ script >
|
html图片调用方法
为图片加入样式lazy 图片路径引用方法用data-original
1 2 3 4 5 6 | < img class = "lazy" data-original = "img/bmw_m1_hood.jpg" >
< img class = "lazy" data-original = "img/bmw_m1_side.jpg" >
< img class = "lazy" data-original = "img/viper_1.jpg" >
< img class = "lazy" data-original = "img/viper_corner.jpg" >
< img class = "lazy" data-original = "img/bmw_m3_gt.jpg" >
< img class = "lazy" data-original = "img/corvette_pitstop.jpg" >
|
js出始化lazyload并设置图片显示方式
1 2 3 4 5 | <script type= "text/javascript" charset= "utf-8" >
$( function () {
$( "img.lazy" ).lazyload({effect: "fadeIn" });
});
</script>
|
在图片中也可以不使用 class="lazy",初始化时使用:
1 | $( "img" ).lazyload({effect: "fadeIn" });
|
这样就可以对全局的图片都有效!
=======以下代码由 聆锾沐雨 提供=========
如果想提载入图片,可以使用 threshold 进行设置,
1 | $( "img.lazy" ).lazyload({ threshold :180});
|
以上实例的含义是:在图片距离屏幕180px时提前载入:
========以下内容由 ?D丶мемοяy 提供===============
引入
1 2 | < script src = "jquery-1.11.0.min.js" ></ script >
< script src = "jquery.lazyload.js?v=1.9.1" ></ script >
|
路径依据实际目录来确定。
1 2 3 4 5 | <script type= "text/javascript" charset= "utf-8" >
$( function () {
$( "img.lazy" ).lazyload({effect: "fadeIn" });
});
</script>
|
图片引用lazyload 方式
1 | < img class = "lazy" data-original = "img/bmw_m1_hood.jpg" />
|
参数设置
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | $( "img.lazy" ).lazyload({
placeholder : "img/grey.gif" ,
effect: "fadeIn" ,
threshold: 200,
event: 'click' ,
container: $( "#container" ),
failurelimit : 10
});
|
lazyload demo 及js包下载路径:LazyloadDemo.zip