前端实现图片懒加载

项目中经常会遇到多图片需要加载的情况，如果一次性全部加载完耗时较多，也较慢。这时就需要用到图片懒加载，常用的有jqueryLazyload这个插件。下载地址：http://www.xiachao.cn/img/20230305/qzydibtvfpp.jpg" width="640" height="480" alt="测试懒加载图片"/> <img class="lazy-load" data-original="./images/2.jpg" width="640" height="480" alt="测试懒加载图片"/> <img class="lazy-load" data-original="./images/3.jpg" width="640" height="480" alt="测试懒加载图片"/> <img class="lazy-load" data-original="./images/4.jpg" width="640" height="480" alt="测试懒加载图片"/> <img class="lazy-load" data-original="./images/5.jpg" width="640" height="480" alt="测试懒加载图片"/> <img class="lazy-load" data-original="./images/6.jpg" width="640" height="480" alt="测试懒加载图片"/> <img class="lazy-load" data-original="./images/7.jpg" width="640" height="480" alt="测试懒加载图片"/> <img class="lazy-load" data-original="./images/8.jpg" width="640" height="480" alt="测试懒加载图片"/> <img class="lazy-load" data-original="./images/9.jpg" width="640" height="480" alt="测试懒加载图片"/> <img class="lazy-load" data-original="./images/4.jpg" width="640" height="480" alt="测试懒加载图片"/> </section>

然后在js里使用：

    $(document).ready(function() {             $("img.lazy-load").lazyload({           placeholder : "./images/bg.png",　　　 effect : "fadeIn", //渐现，show(直接显示),fadeIn(淡入),slideDown(下拉)　　　//threshold : 380, //预加载，在图片距离屏幕180px时提前载入         //event: 'click',　　　//container: $("#container"), // 指定对某容器中的图片实现效果　　　　});   　});