<!-- 这是一个图片标签，但是图片的 src 属性是空的 -->
<img class="lazy" data-src="path/to/image1.jpg" alt="image1">
<img class="lazy" data-src="path/to/image2.jpg" alt="image2">
<img class="lazy" data-src="path/to/image3.jpg" alt="image3">
<script>
window.onload = function() {
var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
lazyImages.forEach(function(img) {
img.src = img.dataset.src;
});
}
</script>
在这个例子中，我们首先在 HTML 中创建了一些 img 标签，但它们的 src 属性是空的。然后我们在 JavaScript 中使用 querySelectorAll 方法找到所有带有 .lazy 类的 img 标签。然后我们遍历这些找到的图片，并将它们的 src 属性设置为它们 data-src 属性的值。这样，只有当图片滚动到视窗中时，图片才会开始加载。
|
顶部 
加入收藏夹
2023-11-09 17:16:12 
已设置保密
回复
引用
报告
编辑
删除