<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
img {
width: 980px;
height: 551px;
}
</style>
</head>
<body>
<img src="" alt="" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607340556942&di=dab46b9203e21c70c92b5b1f5b5d906f&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F22%2F20180822204542_ozqpw.jpg">
<img src="" alt="" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607340556942&di=dab46b9203e21c70c92b5b1f5b5d906f&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F22%2F20180822204542_ozqpw.jpg">
<img src="" alt="" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607340556942&di=dab46b9203e21c70c92b5b1f5b5d906f&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F22%2F20180822204542_ozqpw.jpg">
<img src="" alt="" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607340556942&di=dab46b9203e21c70c92b5b1f5b5d906f&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F22%2F20180822204542_ozqpw.jpg">
<img src="" alt="" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607340556942&di=dab46b9203e21c70c92b5b1f5b5d906f&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F22%2F20180822204542_ozqpw.jpg">
<img src="" alt="" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607340556942&di=dab46b9203e21c70c92b5b1f5b5d906f&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F22%2F20180822204542_ozqpw.jpg">
<img src="" alt="" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607340556942&di=dab46b9203e21c70c92b5b1f5b5d906f&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F22%2F20180822204542_ozqpw.jpg">
<img src="" alt="" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607340556942&di=dab46b9203e21c70c92b5b1f5b5d906f&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F22%2F20180822204542_ozqpw.jpg">
<img src="" alt="" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607340556942&di=dab46b9203e21c70c92b5b1f5b5d906f&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F22%2F20180822204542_ozqpw.jpg">
<img src="" alt="" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607340556942&di=dab46b9203e21c70c92b5b1f5b5d906f&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F22%2F20180822204542_ozqpw.jpg">
<img src="" alt="" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607340556942&di=dab46b9203e21c70c92b5b1f5b5d906f&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F22%2F20180822204542_ozqpw.jpg">
<img src="" alt="" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607340556942&di=dab46b9203e21c70c92b5b1f5b5d906f&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F22%2F20180822204542_ozqpw.jpg">
<img src="" alt="" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607340556942&di=dab46b9203e21c70c92b5b1f5b5d906f&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F22%2F20180822204542_ozqpw.jpg">
<img src="" alt="" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607340556942&di=dab46b9203e21c70c92b5b1f5b5d906f&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F22%2F20180822204542_ozqpw.jpg">
<img src="" alt="" data-src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607340556942&di=dab46b9203e21c70c92b5b1f5b5d906f&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201808%2F22%2F20180822204542_ozqpw.jpg">
</body>
</html>
//获取所有的img标签
var imgDom = document.querySelectorAll('img')
// 加载函数
var imgShow = function() {
// 循环所有img标签
imgDom.forEach((item, i) => {
// 通过判断 元素离顶部的距离 小于 页面被卷去的高度(滚动条滚动的高度) + 页面的可是高度的时候 对图片的src属性进行操作
if(item.offsetTop < document.documentElement.scrollTop + window.innerHeight) {
//通过data-src属性给src属性赋值
item.src = item.getAttribute('data-src')
}
})
}
// 页面加载调用一次加载当前可视页面的图片加载
imgShow()
// 定义一个节流变量
let only = null
// 监听页面的滚动事件
window.addEventListener('scroll', () => {
// 当定时器存在的时候 先清除掉然后在开启新的 防抖的作用
if (only) {
clearTimeout(only)
}
// 不存在的时候直接开启新的
only = setTimeout(() => {
imgShow()
}, 2000)
})
