welcome to xlongwei.com

欢迎大家一起学习、交流、分享


QQ:9167702333 邮箱:admin@xlongwei.com

jquery.lazyload图片延迟加载要点


分类 Java   关键字 分享   标签 web   jquery   发布 hongwei  1445329010763
注意 转载须保留原文链接,译文链接,作者译者等信息。  
jquery.lazyload支持图片延迟加载技术,在图片较多时可以提升客户体验,实际使用时还需要注意几个要点,否则达不到延迟加载的效果,甚至可能适得其反。

jquery.lazyload
<script src="jquery.lazyload.js" type="text/javascript"></script>
<img class="lazy" data-original="img/example.jpg" width="640" height="480">
$("img.lazy").lazyload();

使用要点:
  • src无关紧要:曾尝试支持原生<img src="img/example.jpg">,无果(必须data-original、width等);lazyload会自动给src赋值placeholder,一张1*1的灰色图片
  • data-original:真实图片地址必须提供,其中original可以使用参数data_attribute自定义,即$("img").lazyload({data_attribute:"source"})
  • width="640" height="480":必须提供,或者设置样式<style>img {width:640px;height:480px}</style>,否则达不到延迟加载效果。
    lazyload在判断是否需要加载图片时,$("img").is(":visible")会根据图片的位置和大小来判断是否显示,不提供宽高时默认1*1,所有图片都会立即加载

以上,想要使用lazyload延迟加载技术,对html的改动还是挺大的(提供data-original还能忍,还要width和height就很难忍了)。再考虑到<no-script>的支持代码等,感觉还是原生<img>标签好用。