全国统一服务热线: 0769-83117669   中文版 ENGLISH
联系铭一
东莞市铭一模具配件有限公司
地址:东莞市大朗镇洋坑塘围后底30号
电话:0769-83117669
传真:0769-83117667
主页 > 新闻中心 > 行业新闻 > 行业新闻

超级蜘蛛池之图片懒加载使用方法

发布时间:2020-06-01  信息来源:http://www.gdmymj.com

对前端而言,提高网页的加载速度非常重要。众所周知,图片是最吃流量的。我们都知道的优化技巧是页面加载时只加载首屏页面用到的图片即可,其他的图片资源可以稍后再加载。有一款jquery的lazyload插件便是一个可以实现图片延迟加载的插件,在用户触发某个条件之后再加载对应的图片资源,这对网站的打开速度有很大提升。

1、插件的使用方法很简单(依赖jquery):引入lazyload.js(压缩版才4KB) 
    2、对我们想要延迟加载的图片添加lazy样式,用”data-original” 替换图片的引用路径

3、将页面里所有img属性src属性用data-xx代替,当页面滚动直至此图片出现在可视区域时,用js取到该图片的data-xx的值赋给src。

<!-- 对img标签使用 --><img class="lazy" data-original="img/example.jpg"> <!-- 延迟加载元素的背景图 --><div class="lazy" data-original="img/bg.jpg">

4、在JS文件中调用lazyload()方法,具体例子如下。

$(function(){     //可任意选择你想延迟加载的目标元素,例如直接使用样式名lazy作为选择条件     $("img .lazy").lazyload({          placeholder : "img/grey.gif", //占位图          effect: "fadeIn", // 加载效果          threshold: 200, // 提前加载          event: 'click',  // trigger          container: $("#container"),  //指定容器          failurelimit : 5 // 发生混乱时的hack手段     }); });

参数的具体说明如下:

参数作用说明
placeholder   占位图片   图片路径值,图片加载时占位图自动隐藏  
effect   图片载入时动画效果   值有show(直接显示),fadeIn(淡入),slideDown(滑入)等jq常用效果  
threshold   提前开始加载高度   数字值,是离需要加载目标的高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,避免用户看到图片加载过程  
event   图片加载trigger   值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…)  
container   指定容器   lazyload默认在滚动浏览器滚动条时生效,这个参数可以让你在滚动某DIV的滚动条时执行懒加载  
failurelimit   提高稳定性   若是某一张该被加载的图片未能正确加载,则加载其后的第N张图  

本文链接:

联系我们
全国统一联系热线
0769-83117669
地址:中国广东省东莞市大朗镇洋坑塘围后底30号
传真:0769-83117667
Copyright 2016 版权所有· 东莞市铭一模具配件有限公司  粤ICP备10012085号