美文网首页我爱编程
图片延时加载插件jquery.lazyload.js使用方法

图片延时加载插件jquery.lazyload.js使用方法

作者: 紫瑟枫 | 来源:发表于2018-04-12 14:07 被阅读0次

    最近在写项目的时候,列表页需要加载很多图片,下载图片花费很多时间,那么就会影响这个网页的加载速度,用户体验差,很可能出现卡顿现象。因此,有选择性的请求图片,能够明显的减少服务器压力和流量,也能够减少游览器的负担。

    将页面上img的src属性设置为默认图片,而图片真实路径设置在data-original中。当滚动页面的时候lazyload.js计算图片位置和滚动的位置,先加载默认图片,后加载真实图片。

    注意先写jquery插件 img写法

    $('.info_img').lazylod();

    threshold : 200 //设置灵敏度,表示进入显示区域还有200像素就开始加载

    effect : "fadeIn" //使用淡入特效

    failure_limit : 10 //容差范围,一定要设置此值,原因说明请参考原文档

    container: $("#container") //使用父容器,父容器的CSS样式至少应包含"height: 600px;overflow: scroll;"两个属性

    event : "click" //修改触发事件为单击

    相关文章

      网友评论

        本文标题:图片延时加载插件jquery.lazyload.js使用方法

        本文链接:https://www.haomeiwen.com/subject/mpbxkftx.html