js延迟图像加载、淡入淡出的一种简单方法

不要说太多，直接看例子。

首先是图片标记。
您需要将图片的地址放在数据SRC属性中，而不需要直接除去SRC属性的SRC值。

CSS代码

具有数据SRC属性的所有图像在初始显示状态下是不可见的，并受透明性的调节。
{ IMG
不透明性：1；
过渡：透明度0.3s；
}

img {资料} { SRC
不透明性：0；
}
这篇文章的效果如何当图片加载时，您可以看到效果。

Javaｓｃｒｉｐｔ代码

我们最终将删除数据SRC属性并用SRC属性替换它，但这是在成功加载图片之后的操作：
{ }。foreach.call（document.queryselectorall（'img {资料}的SRC），功能（IMG）{）
img.setattribute（'src '，img.getattribute（'data-src '））；
img.onload =函数（）{
img.removeattribute（'data-src）；
}；
}）；
与其他类型的图像延迟加载技术相比，这种方法非常简单。它几乎不需要任何其他条件，它可以在任何地方使用，而且使用起来非常灵活。

不过，重要的是要注意简单、好、简单和不足。它不具备将图片和图片滚动到可视窗口重新加载的功能。最后使用该技术，或查看场景。

以上是本文的全部内容，希望能帮助您工作和学习。