休闲小零食网站开发方案,建设网站的一般步骤,网络运营商无服务怎么恢复,网站优化排名方案首先解释一下什么叫图片懒加载。图片懒加载是一种在页面加载时#xff0c;延迟加载图片资源的技术#xff0c;也就是说图片资源在需要的时候才会加载#xff0c;就是在屏幕显示范围内加载图片#xff0c;屏幕显示范围外图片不加载。
一、关键函数
用到的关键函数#xf…首先解释一下什么叫图片懒加载。图片懒加载是一种在页面加载时延迟加载图片资源的技术也就是说图片资源在需要的时候才会加载就是在屏幕显示范围内加载图片屏幕显示范围外图片不加载。
一、关键函数
用到的关键函数globalThis.IntersectionObserver。
var observer new IntersectionObserver(callback,options);IntersectionObserver两个参数 callback是当被监听元素的可见性变化时触发的回调函数。一般会调用两次一次是目标元素刚刚进入视口开始可见另一次是完全离开视口开始不可见。options是一个配置参数可选有默认的属性值 官方的示例代码
var observer new IntersectionObserver(changes {for (const change of changes) {console.log(change.time);// Timestamp when the change occurred// 当可视状态变化时状态发送改变的时间戳// 对比时间为实例化的时间// 比如值为1000时表示在IntersectionObserver实例化的1秒钟之后触发该元素的可视性变化console.log(change.rootBounds);// Unclipped area of root// 根元素的矩形区域信息即为getBoundingClientRect方法返回的值console.log(change.boundingClientRect);// target.boundingClientRect()// 目标元素的矩形区域的信息console.log(change.intersectionRect);// boundingClientRect, clipped by its containing block ancestors,// and intersected with rootBounds// 目标元素与视口或根元素的交叉区域的信息console.log(change.intersectionRatio);// Ratio of intersectionRect area to boundingClientRect area// 目标元素的可见比例即intersectionRect占boundingClientRect的比例// 完全可见时为1完全不可见时小于等于0console.log(change.target);// the Element target// 被观察的目标元素是一个 DOM 节点对象// 当前可视区域正在变化的元素}
}, {});// Watch for intersection events on a specific target Element.
// 对元素target添加监听当target元素变化时就会触发上述的回调
observer.observe(target);// Stop watching for intersection events on a specific target Element.
// 移除一个监听移除之后target元素的可视区域变化将不再触发前面的回调函数
observer.unobserve(target);// Stop observing threshold events on all target elements.
// 停止所有的监听
observer.disconnect();
在这里插入代码片下面开始实现我们的图片懒加载。
二、Javascript关键代码如下
lazy: function() {var action {setFront:function(item){if(item.boundingClientRect.topwindow.innerHeight100){ var img new Image();img.src item.target.link;img.onload function(){item.target.setAttribute(myth-lazy,finished);item.target.srcitem.target.link;};obs.unobserve(item.target);} }};if(globalThis.IntersectionObserver){var obs new IntersectionObserver(function(changes){changes.forEach(function(t){action.setFront(t);}); });this.each(function(item){item.link item.getAttribute(myth-thumb)||item.getAttribute(myth-original);if(!item.getAttribute(myth-lazy)) obs.observe(item);})}}这里说明一下这段代码是嫁到我们以前js框架myth.js中的想看完整结构的在文章末尾下载相关代码。
二、HTML代码如下
div classmythBox midimg classimglazy srcimg/loading.gif myth-originalimg/1.png/img classimglazy srcimg/loading.gif myth-originalimg/2.png/img classimglazy srcimg/loading.gif myth-originalimg/3.png/img classimglazy srcimg/loading.gif myth-originalimg/4.png/img classimglazy srcimg/loading.gif myth-originalimg/3.png/img classimglazy srcimg/loading.gif myth-originalimg/1.png/img classimglazy srcimg/loading.gif myth-originalimg/2.png/img classimglazy srcimg/loading.gif myth-originalimg/3.png/img classimglazy srcimg/loading.gif myth-originalimg/4.png/img classimglazy srcimg/loading.gif myth-originalimg/2.png//div script typetext/javascript myth(.imglazy).lazy(true); /script三、展示效果 第二张图下面的代码能清楚的看到展示在用户的部分图片已经展示未在用户视野范围内的图片还没有展示指示原来的替代图片。
四、代码下载
源代码下载请单击
