在我们做项目过程中，可能会遇到图片多、加载慢，以及设计很花哨的页面，比如产品展示、专题活动。此类页面需要用到很多图片，页面长，这样的页面未做处理的话，在浏览器打开的时候往往会很卡，性能比较差，因为一次性需要加载很多图片，如果不解决这个问题，产品那边很难通过，严重影响了用户体验。为了解决这个问题，我也搜索了一些方法，发现有一款插件可以专门解决图片延迟加载问题。
插件名：jQuery.lazyload，下载压缩包，请猛戳这里：点击下载
解压压缩包，我们可以引用jquery和jquery.lazyload.js到你的页面，如下：
html图片调用方法
为图片加入样式lazy 图片路径引用方法用data-original，代码如下：
JS函数调用
$ { $.lazyload({effect: "fadeIn"}); });
在图片中也可以不使用class="lazy"，初始化时使用：
$.lazyload({effect: "fadeIn"});
这样会对页面上所有图片都会起作用，我们可以看情况来设定。
如果想提载入图片，可以使用 threshold 进行设置，如下：
$.lazyload;
以上实例的含义是：在图片距离屏幕180px时提前载入。
短短的几行代码就可以提升我们页面的性能，从而提高用户体验。了解完上面的使用方法，我们可以看下案例，请猛戳：DEMO
还有一点差点忘记了，这个插件的兼容问题，它目前基本兼容主流浏览器：
总结
上面只是jQuery.lazyload的应用，其原理后面会再抽时间分析下。并且这个插件只是针对图片，以后有时间可以探讨下数据延时加载的知识以及瀑布流的插件。
缺点：在jQuery动画页面应用中，比如偏复杂的opacity动画、视觉差动画，本人测试过，不太适合。
如果你有好的方法，可以一起探讨。
本文由威尼斯888发布于计算机网络 / Web前端,转载请注明出处：此类页面需要用到很多图片
关键词：