懒加载的好处就不扯了，如何实现呢？早期处理...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;padding: 0
}
</style>
</head>
<body>
<ul>
<li><img data-s="http://pic17.photophoto.cn/20101227/0009021186753392_b.jpg" alt="" src="https://p1.ssl.qhimgs1.com/sdr/400__/t01c2def919778941fb.jpg"></li>
<li><img data-s="http://pic15.photophoto.cn/20100613/0005018304692461_b.jpg" alt="" src="https://p1.ssl.qhimgs1.com/sdr/400__/t01c2def919778941fb.jpg"></li>
<li><img data-s="http://hbimg.b0.upaiyun.com/ac502031c2c7cf1e48b8a2e5964364c9603ea46210488-ruhT6l_fw658" alt="" src="https://p1.ssl.qhimgs1.com/sdr/400__/t01c2def919778941fb.jpg"></li>
<li><img data-s="http://img.52z.com/upload/news/image/20180213/20180213064608_79494.jpg" alt="" src="https://p1.ssl.qhimgs1.com/sdr/400__/t01c2def919778941fb.jpg"></li>
<li><img data-s="http://uploads.5068.com/allimg/1808/196-1PPZ94146.jpg" alt="" src="https://p1.ssl.qhimgs1.com/sdr/400__/t01c2def919778941fb.jpg"></li>
<li><img data-s="http://uploads.5068.com/allimg/1712/151-1G204092507.jpg" alt="" src="https://p1.ssl.qhimgs1.com/sdr/400__/t01c2def919778941fb.jpg"></li>
</ul>
</body>
<script>
let imgs = document.querySelectorAll('img')
let clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
function lazyLoadImg () {
for (let i = 0; i < imgs.length; i ++) {
if((imgs[i].getBoundingClientRect().top + imgs[i].height)>=0&&imgs[i].getBoundingClientRect().top < clientHeight){
imgs[i].src = imgs[i].getAttribute('data-s')
}
}
}
window.addEventListener('scroll', lazyLoadImg);
</script>
</html>
src是网络数据可直接复制
这里为什么使用data- 命名属性，因为HTMLElement早之前支持了dataset属性（早期介绍过）
原理很简单，就是图片的位置与滚动条高度的逻辑处理，那么这里使用了DOM的getBoundingClientRect()方法，获取当前DOM距离document四边的距离
这是打印其中一个DOM元素的返回，宽高，四边距离都是直接计算出来的
imgs[i].getBoundingClientRect().top + imgs[i].height就是当前图片距离document头部的距离，如果此时滚动条的高度>此高度就说明当前viewport已经显示了图片的位置，此时改变src即可，逻辑还是比较简单，复制代码看效果的时候可能有点看不出来
(imgs[i].getBoundingClientRect().top + imgs[i].height)>=0&&imgs[i].getBoundingClientRect().top < clientHeight-500)
更改一下逻辑，让他多500px的位置再显示
继续往下拉才会触发！！
今天主要介绍另一种方法，Intersection Observer
各种概念什么就不搬了，自己了解一下！那么这玩意的作用就是判断DOM是否出现在了可视区！这就很骚了（我们就需要做什么滚动条高度这种花里胡哨的判断了）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;padding: 0
}
</style>
</head>
<body>
<ul>
<li><img data-s="http://pic17.photophoto.cn/20101227/0009021186753392_b.jpg" alt="" src="https://p1.ssl.qhimgs1.com/sdr/400__/t01c2def919778941fb.jpg"></li>
<li><img data-s="http://pic15.photophoto.cn/20100613/0005018304692461_b.jpg" alt="" src="https://p1.ssl.qhimgs1.com/sdr/400__/t01c2def919778941fb.jpg"></li>
<li><img data-s="http://hbimg.b0.upaiyun.com/ac502031c2c7cf1e48b8a2e5964364c9603ea46210488-ruhT6l_fw658" alt="" src="https://p1.ssl.qhimgs1.com/sdr/400__/t01c2def919778941fb.jpg"></li>
<li><img data-s="http://img.52z.com/upload/news/image/20180213/20180213064608_79494.jpg" alt="" src="https://p1.ssl.qhimgs1.com/sdr/400__/t01c2def919778941fb.jpg"></li>
<li><img data-s="http://uploads.5068.com/allimg/1808/196-1PPZ94146.jpg" alt="" src="https://p1.ssl.qhimgs1.com/sdr/400__/t01c2def919778941fb.jpg"></li>
<li><img data-s="http://uploads.5068.com/allimg/1712/151-1G204092507.jpg" alt="" src="https://p1.ssl.qhimgs1.com/sdr/400__/t01c2def919778941fb.jpg"></li>
</ul>
</body>
<script>
let imgs = document.querySelectorAll('img')
var io = new IntersectionObserver((entries)=>{
entries.forEach((item) => { // 遍历entries数组
if(item.isIntersecting){ // 当前元素可见
item.target.src = item.target.dataset.s // 替换src
io.unobserve(item.target) // 停止观察当前元素 避免不可见时候再次调用callback函数
}
})
},{
})
imgs.forEach((item)=>{
io.observe(item)
})
</script>
</html>
简单介绍一下用法：
new IntersectionObserver（callback，options）
IntersectionObserver是浏览器原生提供的构造函数，接受两个参数：callback是可见性变化时的回调函数，option是配置对象（该参数可选）。
比如我们现在声明一个对象
var io = new IntersectionObserver(callback, option);
// 开始观察 DOM元素，仅仅一个节点，多个需遍历
io.observe(document.getElementById('example'));
// 停止观察
io.unobserve(element);
// 关闭观察器
io.disconnect();
目标元素的可见性变化时，就会调用观察器的回调函数callback
callback一般会触发两次。一次是目标元素刚刚进入视口（开始可见），另一次是完全离开视口（开始不可见）。
var io = new IntersectionObserver(
entries => {
console.log(entries);
}
);
我们来看看返回什么
let imgs = document.querySelectorAll('img')
var io = new IntersectionObserver(entries=>{
console.log(entries)
})
io.observe(imgs[0])
那么这里的isIntersecting 代表是否可见元素！因为我当前监听的是第一张图，所以这里是true，如果换成第四张就是false了，当前不在可视窗内
intersectionRatio是指元素的可见比例，就是有多少漏外面让你看到了
target就是当前元素信息，这里有个dataset属性，所以命名里面的属性加个data前缀
那么条件里面的代码就可以看懂了
当元素可见的时候 item.isIntersecting
item.target.src = item.target.dataset.s // 替换src
io.unobserve(item.target) 此时停止监听
框架就比较方便了，引入插件 v-lazy一下什么的！！谷歌也是支持了loading=lazy，但是不是所有图片都像谷歌这么嚣张的！
网友评论