img加载本地图片_图像延迟加载

做了个图片素材网站，需要用到瀑布流展示加延时加载展示，当图片进入可视区域的时候才进行加载，这样可以提升网页的加载速度，还能节省服务器的网络带宽来改善用户体验。

什么时延时加载？

延迟加载图像是指Web和应用程序开发中的一组技术，这些技术可将页面上图像的加载推迟到以后的某个时间点(当实际需要这些图像时)，而不是预先加载它们，可以称它们为非关键资源，就图像来说，“非关键”通常是指“屏幕外”的内容。

为什么要延迟加载图像？

当用户浏览网站时，看到的是第一屏的内容，如果一屏加载的图片非常多，可能会加载用户永远不会查看的内容， 进而会浪费一些资源，比如：数据流量、处理时间等，只有当页面滚动时才加载屏幕外的图像。这样可以减少初始页面加载时间、初始页面负载以及系统资源使用量，对性能产生积极影响。

延迟加载图像

网页上的图像可以通过两种方式加载-使用<img>标签或使用CSS`background`属性。首先让我们看看两者中比较常见的<img>标记。

浏览器使用src标签的属性来触发图像加载。不管它是HTML中的第一张图像还是第一千张图像，只要浏览器读取了src属性，则会触发图像加载。所以<img>元素中使用的图像是最常见的延迟加载对象，所以我们将图片网址放到src以外的属性中，比如使用src来指定图片URL。

<img src="http://suibo.co/gallery/demo/1.png" />

现在src为空了，浏览器将不会触发图片的加载了。接下来我们要告诉浏览器什么时候加载图片。我们检查图像（即其占位符）是否一旦进入可视范围，就要触发加载。

要检查图像何时进入可视范围，有两种方法：

使用Javascript事件触发图片加载

我们使用scroll和resize事件来监听网页变化，当用户滚动页面或浏览器窗口的大小更改时，监听网页的滚动条的位置，然后判断当前在窗口中的图像顶部位置，可以根据当前文档滚动顶部和窗口高度来完成此操作。如果它已进入视口，则从src属性中选择URL并将其放入src属性中。我们还将删除lazy用于标识延迟加载的图像的Class，以用于稍后触发的事件。加载完所有图像可以删除事件侦听器。

下面来看一个例子：

<img src="http://suibo.co/gallery/demo/1.png" />
<img src="http://suibo.co/gallery/demo/2.png" />
<img src="http://suibo.co/gallery/demo/3.png" />
<img class="lazy" src="http://suibo.co/gallery/demo/4.png" />
<img class="lazy" src="http://suibo.co/gallery/demo