在我们做项目过程中,可能会遇到图片多、加载慢,以及设计很花哨的页面,比如产品展示、专题活动。此类页面需要用到很多图片,页面长,这样的页面未做处理的话,在浏览器打开的时候往往会很卡,性能比较差,因为一次性需要加载很多图片,如果不解决这个问题,产品那边很难通过,严重影响了用户体验。为了解决这个问题,我也搜索了一些方法,发现有一款插件可以专门解决图片延迟加载问题。
插件名: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前端,转载请注明出处:此类页面需要用到很多图片
关键词: