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

对于一个网站，最占用带宽，最影响页面显示速度的东西就是图片。

图片有时是必须的,对于一个网站，最占用带宽，最影响页面显示速度的东西就是图片.作为一个站长，我们是千方百计的使用各种技巧来优化图片。如果一个页面上图片太大，或图片太多，无法消减，我们有另外一个方法来提升用户的页面显示体验，那就是延迟加载。有一种简单的方法，只需要几行代码，就能达到这种效果。同时，还附加一种淡入淡出的显示效果。

首先是图片标记的写法

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

需要将图片的地址放到 data-src 属性里，而src值不需要，直接将src属性去掉。

CSS代码

所有具有data-src属性的图片，我们将其初始显示状态为不可见，通过透明度来调节：

<style>
img { opacity: 1; transition: opacity 0.3s;}img[data-src]{ opacity: 0;}
</style>

这样写的作用是什么？等当图片加载时，你就能看的效果了。

JavaScript代码(页面底部)

我们最终会将 data-src 属性去掉，换成src属性，但这是图片加载成功后的动作：

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

相比起其它各种的图片延迟加载技术，这种方法非常的简单，它几乎不要求其它任何条件，可以用在任何地方，使用起来非常灵活。

但是要注意的是，简单有简单的好坏，也会因为简单而不足。它不具有图片图片滚动到可视窗口内再加载的功能。最终使用哪种技术，还是要看场景而定

不兼容ie8，如果要让ie8显示图片，需要<img src="/images/image.jpg"  data-src="/images/image.jpg" alt="">