当前位置：首页 > 资讯 > 技术文档

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

时间：2022-12-27 03:50 编辑：来源：阅读：
扫一扫，手机访问

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

话不多说，直接看示例 [b]首先是图片标记的写法[/b]

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

需要将图片的地址放到 [code]data-src [/code]属性里，而[code]src[/code]值不需要，直接将[code]src[/code]属性去掉。 [b]CSS代码[/b] 所有具有[code]data-src[/code]属性的图片，我们将其初始显示状态为不可见，通过透明度来调节：

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

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

这样写的作用是什么？等当图片加载时，你就能看的效果了。 [b]JavaScript代码[/b] 我们最终会将[code] data-src [/code]属性去掉，换成src属性，但这是图片加载成功后的动作：

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

相比起其它各种的图片延迟加载技术，这种方法非常的简单，它几乎不要求其它任何条件，可以用在任何地方，使用起来非常灵活。但是要注意的是，简单有简单的好坏，也会因为简单而不足。它不具有图片图片滚动到可视窗口内再加载的功能。最终使用哪种技术，还是要看场景而定。以上就是本文的全部内容，希望对大家的工作和学习能有所帮助。

全部评论(0)

上一篇：页面实时更新时间的JS实例代码
下一篇：JavaScript 渐变效果页面图片控制第1/2页

资讯排行榜
更多>>