在平时开发的时候可能需要到一些效果，比如图片的懒加载，也能提高页面的性能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本</title>
<style>
div>ul>li>img{
width: 300px;
height: 300px;
vertical-align: middle;
}
</style>
</head>
<body>
<div>
<ul>
<li>
<img src="https://sf3-scmcdn2-tos.pstatp.com/xitu_juejin_web/img/logo.a7995ad.svg" >
</li>
<li>
<img src="https://sf3-scmcdn2-tos.pstatp.com/xitu_juejin_web/img/logo.a7995ad.svg" >
</li>
<li>
<img src="https://sf3-scmcdn2-tos.pstatp.com/xitu_juejin_web/img/logo.a7995ad.svg" >
</li>
<li>
<img src="https://sf3-scmcdn2-tos.pstatp.com/xitu_juejin_web/img/logo.a7995ad.svg" >
</li>
<li>
<img src="https://sf3-scmcdn2-tos.pstatp.com/xitu_juejin_web/img/logo.a7995ad.svg" >
</li>
<li>
<img src="https://sf3-scmcdn2-tos.pstatp.com/xitu_juejin_web/img/logo.a7995ad.svg" >
</li>
<li>
<img src="https://sf3-scmcdn2-tos.pstatp.com/xitu_juejin_web/img/logo.a7995ad.svg" >
</li>
</ul>
</div>
</body>
window.onload = function (){
const imgs = document.querySelectorAll('img')
lazyImg(imgs)
}
const lazyImg = (imgs) => {
const io = new IntersectionObserver((entries,observes)=>{
entries.forEach(entry=>{
if(entry.isIntersecting){
const img = entry.target
img.setAttribute('src',img.dataset.src)
img.onload = img.onerror = () => io.unobserve(img)
}
})
})
imgs.forEach(item=>{
io.observe(item)
})
}
</script>
上面是一个简单的实现，我们仔细来分析一下
用到Intersection Observer API
const observer = new IntersectionObserver(callback, options);
接收一个回调函数，和一个配置项。
callback 有以下api
let callback =(entries, observer) => {
entries.forEach(entry => {
// Each entry describes an intersection change for one observed
// entry.boundingClientRect
// 返回包含目标元素的边界信息的 DOMRectReadOnly
// entry.intersectionRatio
// entry.intersectionRect
// entry.isIntersecting
// entry.rootBounds
// entry.target // 当前元素
// entry.time
详细参见MDN[：](https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserverEntry)
});
};
let option = {
root: null, // 如果未指定或者为null，则默认为浏览器视窗。
rootMargin: '0px 0px 0px 0px', //一个在计算交叉值时添加至根的边界盒(bounding_box)中的一组偏移量，
类型为字符串(string) ，
可以有效的缩小或扩大根的判定范围从而满足计算需要
threshold: 0.0 // 规定了一个监听目标与边界盒交叉区域的比例值，可以是一个具体的数值或是一组0.0到1.0之间的数组
}
以上均为MDN解释。
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！