First, let’s explain what lazy loading of images is. Lazy loading of images is a technology that delays loading of image resources when the page is loaded. This means that image resources will be loaded only when needed, that is, images will be loaded within the screen display range, and images outside the screen display range will not be loaded.
1. Key functions
Key functions used: globalThis.IntersectionObserver.
var observer = new IntersectionObserver(callback,options);
IntersectionObserver has two parameters:
- callback is a callback function that is triggered when the visibility of the monitored element changes. Usually it is called twice: once when the target element has just entered the viewport (begins to be visible), and again when it completely leaves the viewport (begins to be invisible).
- options is a configuration parameter, optional, with default attribute values
Official sample code
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，完全不可见时小于等于0
console.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();
在这里插入代码片
Let’s start implementing lazy loading of our images.
2. The key Javascript code is as follows:
lazy: function() {
var action ={
setFront:function(item){
if(item.boundingClientRect.top<=window.innerHeight+100){
var img = new Image();
img.src = item.target.link;
img.onload = function(){
item.target.setAttribute("myth-lazy","finished");
item.target.src=item.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);
})
}
}
Let me explain here, this code is married into our previous js framework myth.js. If you want to see the complete structure, download the relevant code at the end of the article.
2. The HTML code is as follows:
<div class="mythBox mid">
<img class="imglazy" src="img/loading.gif" myth-original="img/1.png"/>
<img class="imglazy" src="img/loading.gif" myth-original="img/2.png"/>
<img class="imglazy" src="img/loading.gif" myth-original="img/3.png"/>
<img class="imglazy" src="img/loading.gif" myth-original="img/4.png"/>
<img class="imglazy" src="img/loading.gif" myth-original="img/3.png"/>
<img class="imglazy" src="img/loading.gif" myth-original="img/1.png"/>
<img class="imglazy" src="img/loading.gif" myth-original="img/2.png"/>
<img class="imglazy" src="img/loading.gif" myth-original="img/3.png"/>
<img class="imglazy" src="img/loading.gif" myth-original="img/4.png"/>
<img class="imglazy" src="img/loading.gif" myth-original="img/2.png"/>
</div>
<script type="text/javascript">
myth(".imglazy").lazy(true);
</script>
3. Display effect
In the second picture, the code below can clearly see that some of the pictures displayed to the user have been displayed, and the pictures that are not within the user's field of view have not yet been displayed, indicating the original replacement picture.