处理图片，加快网站访问的速度

首先是图片标记的写法

?

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

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

CSS代码

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

?

1 2 3 4 5 6 7 8

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

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

JavaScript代码

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

?

1 2 3 4 5 6

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

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

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