本文介绍一种基于JavaScript和CSS的简单图片延迟加载方案。通过将真实地址存入data-src属性，利用CSS控制初始透明度和过渡动画，并在JS中动态替换src属性实现加载后的淡入显示。该方法代码简洁、兼容性好，但缺乏视口检测功能，适用于对实现复杂度要求较低的场景。
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');
};
});与多种其他图片延迟加载技术相比，这种方法实现极为简单，几乎不依赖额外条件，可应用于各种场景，使用灵活性高。
需要注意的是，简单方案也有局限性，它不具备判断图片是否滚动到可视窗口内再加载的功能。因此，最终选择何种技术需根据具体应用场景决定。
以上内容即为本文的全部讲解，希望能对读者的工作和学习提供帮助。