什么是懒加载web技术?

懒加载技术 可以减少图片对服务器的一次性请求,做到按需加载,提升用户体验。比较代表性的解决方案有 lazyload.js ,比较主流了,在2012年左右都已经有了,不是什么秘密,只不过目前还不是被很多网站所采用,除了像切图网这样的专业级别的web前端外包公司,就有高频率的用这个技术。

使用方法

引用jquery和jquery.lazyload.js到你的页面

<script src=”jquery-1.11.0.min.js”></script>

<script src=”jquery.lazyload.js?v=1.9.1″></script>

html图片调用方法

为图片加入样式lazy 图片路径引用方法用data-original

<img data-original=”img/bmw_m1_hood.jpg”>

<img data-original=”img/bmw_m1_side.jpg”>

<img data-original=”img/viper_1.jpg”>

<img data-original=”img/viper_corner.jpg”>

<img data-original=”img/bmw_m3_gt.jpg”>

<img data-original=”img/corvette_pitstop.jpg”>

js出始化lazyload并设置图片显示方式

<script type=”text/javascript” charset=”utf-8″>

$(function() {

$(“img.lazy”).lazyload({effect: “fadeIn”});

});

</script>

懒加载演示地址

http://www2.qieban.cn/jquery_lazyload/

lazyload.js对服务器占一点点资源,但是可以对服务器的请求或者网站的性能都有很高的提升,是非常划算的。我们常年致力于web前端外包,以及网站性能、用户体验的研究,非常青睐这样的效果。


切图网 qietu.com是国内首家web前端外包服务公司,提供优质的pc、h5手机、响应式、edm邮件模板的制作,wx:qietuwang

切版- 切图网(qietu.com)旗下psd转html,前端外包的“切图客”团体。

共有1条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

客服咨询
客服1
客服2
微信公众号