一、如何使用: Lazy Load 依赖于 jQuery。引入文件 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.lazyload.js"></script> 图片基本属性的设置 <img class="lazy" src="img/grey.gif" alt="图" width="640" height="480" data-original="img/example.jpg" /> 最后使用: $(function() { $("img.lazy").lazyload(); });
二、基本选项: 1、设置临界点 默认情况下图片会出现在屏幕时加载. 如果你想提前加载图片, 可以设置threshold 选项, 设置 threshold 为 200 令图片在距离屏幕 200 像素时提前加载. $("img.lazy").lazyload({ threshold : 200 }); 2、设置事件来触发加载 你可以使用jQuery事件,例如click和mouseover。也可以使用自定义事件。 $("img.lazy").lazyload({ event : "click" }); 3、使用特效 默认情况下,插件等待图像完全加载并调用show()。你可以使用任何你想要的效果。下面的代码使用fadeIn (淡入效果)。 $("img.lazy").lazyload({ effect : "fadeIn" }); 4、加载隐藏的图片 为了提升性能, Lazy Load 默认忽略了隐藏图片. 如果你想要加载隐藏图片, 请将 skip_invisible 设为 false $("img.lazy").lazyload({ skip_invisible : false });
标签:lazy,img,插件,lazyload,使用,加载,图片 From: https://www.cnblogs.com/louqianzhu/p/17334279.html