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

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

首先是图片标记。





您需要将图片的地址放在数据SRC属性中,而不需要直接除去SRC属性的SRC值。

CSS代码

具有数据SRC属性的所有图像在初始显示状态下是不可见的,并受透明性的调节。


{ IMG
不透明性:1;
过渡:透明度0.3s;
}

img {资料} { SRC
不透明性:0;
}


这篇文章的效果如何当图片加载时,您可以看到效果。

Javascript代码

我们最终将删除数据SRC属性并用SRC属性替换它,但这是在成功加载图片之后的操作:


{ }。foreach.call(document.queryselectorall('img {资料}的SRC),功能(IMG){)
img.setattribute('src ',img.getattribute('data-src '));
img.onload =函数(){
img.removeattribute('data-src);
};
});


与其他类型的图像延迟加载技术相比,这种方法非常简单。它几乎不需要任何其他条件,它可以在任何地方使用,而且使用起来非常灵活。

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

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