可直接复制到本地调试
<!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>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul{
list-style: none;
}
.box{
width: 80%;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
}
.item{
width: calc( 33.33% - 20px );
margin: 10px;
min-height: 200px;
}
.item img{
width: 100%;
}
</style>
</head>
<body>
<div class="box">
<!-- <div class="item">
<img src="./img/Empty.svg" alt="">
</div> -->
</div>
</body>
<script>
//先做一个数组，用来装图片的网络地址
var imgList = [
{
default:'./img/Empty.svg', //这是默认生效的图片，你可以改成自己的
url:'https://images.pexels.com/photos/23719800/pexels-photo-23719800.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'
},
{
default:'./img/Empty.svg',
url:'https://images.pexels.com/photos/20569931/pexels-photo-20569931.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'
},
{
default:'./img/Empty.svg',
url:'https://images.pexels.com/photos/23105903/pexels-photo-23105903.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'
}
,
{
default:'./img/Empty.svg',
url:'https://images.pexels.com/photos/22816073/pexels-photo-22816073.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'
},
{
default:'./img/Empty.svg',
url:'https://images.pexels.com/photos/18197764/pexels-photo-18197764.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'
},
{
default:'./img/Empty.svg',
url:'https://images.pexels.com/photos/24031902/pexels-photo-24031902.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'
}
,
{
default:'./img/Empty.svg',
url:'https://images.pexels.com/photos/23914518/pexels-photo-23914518.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'
},
{
default:'./img/Empty.svg',
url:'https://images.pexels.com/photos/16118941/pexels-photo-16118941.jpeg?auto=compress&cs=tinysrgb&w=800&lazy=load'
},
{
default:'./img/Empty.svg',
url:'https://images.pexels.com/photos/22937531/pexels-photo-22937531.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'
},
{
default:'./img/Empty.svg',
url:'https://images.pexels.com/photos/21915597/pexels-photo-21915597.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'
},
{
default:'./img/Empty.svg',
url:'https://images.pexels.com/photos/16703290/pexels-photo-16703290.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'
}
,
{
default:'./img/Empty.svg',
url:'https://images.pexels.com/photos/13298586/pexels-photo-13298586.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'
},
{
default:'./img/Empty.svg',
url:'https://images.pexels.com/photos/18109714/pexels-photo-18109714.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'
},
{
default:'./img/Empty.svg',
url:'https://images.pexels.com/photos/22670156/pexels-photo-22670156.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'
}
,
{
default:'./img/Empty.svg',
url:'https://images.pexels.com/photos/21852583/pexels-photo-21852583.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'
},
{
default:'./img/Empty.svg',
url:'https://images.pexels.com/photos/21367366/pexels-photo-21367366.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'
},{
default:'./img/Empty.svg',
url:'https://images.pexels.com/photos/17102067/pexels-photo-17102067.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'
},
{
default:'./img/Empty.svg',
url:'https://images.pexels.com/photos/24038436/pexels-photo-24038436.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'
}
,
{
default:'./img/Empty.svg',
url:'https://images.pexels.com/photos/19473669/pexels-photo-19473669.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'
},
{
default:'./img/Empty.svg',
url:'https://images.pexels.com/photos/20470948/pexels-photo-20470948.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'
},
{
default:'./img/Empty.svg',
url:'https://images.pexels.com/photos/22469105/pexels-photo-22469105.jpeg?auto=compress&cs=tinysrgb&w=800&lazy=load'
}
,
{
default:'./img/Empty.svg',
url:'https://images.pexels.com/photos/13743557/pexels-photo-13743557.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=2'
},
{
default:'./img/Empty.svg',
url:'https://images.pexels.com/photos/23230661/pexels-photo-23230661.jpeg?auto=compress&cs=tinysrgb&w=800&lazy=load'
},
]
var box = document.querySelector('.box');
//渲染页面结构的工具函数，用来遍历list，然后渲染成dom结构到页面
function initImg(list){
for( var i = 0; i < list.length; i++ ){
var div = document.createElement('div');
div.className = 'item';
var img = document.createElement('img');
img.src = list[i].default;
img.dataset.url= list[i].url;
div.appendChild(img);
box.appendChild(div);
}
}
initImg(imgList);//先调用一次工具函数
window.onload = function(){
//这里要等页面加载完毕，也就是默认图片加载完毕后，再执行之后的逻辑
var items = document.querySelectorAll('.item');
Observer(items);//调用观察者工具函数，给其传要观察的Dom对象
}
//观察者工具函数
function Observer(list){
var observer = new IntersectionObserver(function(entries){
for( var n = 0; n < entries.length; n++ ){
if( entries[n].isIntersecting && entries[n].target.children[0].src.includes( "img/Empty.svg" ) ){
entries[n].target.children[0].src = entries[n].target.children[0].dataset.url;
}
}
})
for( var i = 0; i < list.length; i++ ){
observer.observe(list[i])
}
}
</script>
</html>
