JS实现图片延迟加载并淡入淡出效果的简单方法
话不多说，直接看示例
首先是图片标记的写法
<imgdata-src="/images/image.jpg"alt="">
需要将图片的地址放到data-src属性里，而src值不需要，直接将src属性去掉。
CSS代码
所有具有data-src属性的图片，我们将其初始显示状态为不可见，通过透明度来调节：
img{
opacity:1;
transition:opacity0.3s;
}
img[data-src]{
opacity:0;
}
这样写的作用是什么？等当图片加载时，你就能看的效果了。
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');
};
});
相比起其它各种的图片延迟加载技术，这种方法非常的简单，它几乎不要求其它任何条件，可以用在任何地方，使用起来非常灵活。
但是要注意的是，简单有简单的好坏，也会因为简单而不足。它不具有图片图片滚动到可视窗口内再加载的功能。最终使用哪种技术，还是要看场景而定。
以上就是本文的全部内容，希望对大家的工作和学习能有所帮助。