JS实现图片延迟加载并淡入淡出效果的简单方法

JS实现图片延迟加载与淡入效果

直接查看以下示例代码。

首先定义图片的HTML标记结构。

<img data-src="/images/image.jpg" alt="">

需要将图片的真实地址存入 data-src 属性中，同时移除 src 属性，即不要使用标准的 src 属性。

接下来编写相关的CSS样式。

对于所有包含 data-src 属性的图片元素，设置其初始显示状态为不可见，具体通过调整透明度来实现。

img {
 opacity: 1;
 transition: opacity 0.3s;
}

img[data-src] {
 opacity: 0;
}

这样做的目的是在图片加载完成后，利用CSS过渡效果呈现视觉变化。

随后编写JavaScript逻辑代码。

最终目标是移除 data-src 属性并设置 src 属性，但这一操作仅在图片加载成功后执行。

[].forEach.call(document.querySelectorAll('img[data-src]'), function(img) {
 img.setAttribute('src', img.getAttribute('data-src'));
 img.onload = function() {
 img.removeAttribute('data-src');
 };
});

与多种其他图片延迟加载技术相比，这种方法实现极为简单，几乎不依赖额外条件，可应用于各种场景，使用灵活性高。

需要注意的是，简单方案也有局限性，它不具备判断图片是否滚动到可视窗口内再加载的功能。因此，最终选择何种技术需根据具体应用场景决定。

以上内容即为本文的全部讲解，希望能对读者的工作和学习提供帮助。