css延迟加载图片 |css 多张图片间距

.img-hidden {
background-image: none !important;
}
.img-show {
background-image: url("example.jpg") !important;
}

上面的代码是一个简单的CSS类样式，它将图片的显示与隐藏与背景图片相关联。在页面加载完成后，将图片设为.hide类样式，然后使用JavaScript来控制图片类的更改以实现延迟加载：

var img = document.querySelector('.img-hidden');
setTimeout(function(){
img.classList.remove('img-hidden');
img.classList.add('img-show');
}, 3000);

在上述JavaScript中，通过setTimeout延迟3秒后，将隐藏的图片变为可见，实现了图片的延迟加载。这个数字可以自己调整，根据自己的页面情况来确定。

总的来说，CSS延迟加载图片技术是提高网站性能的一个重要方法。使用它能够减少页面加载时间，提高用户的访问体验。在页面加载较慢或网络状态不佳的情况下，这个技术的优势尤为明显。