在我们访问一个图片展示比较多的网页时，加载速度慢很多时候正是因为图片多导致，大量的img图片导致页面渲染的堵塞。当费了许多力气把全部图片和页面加载出来时而用户早已离去。另一方面，若用户只查看了网页的前面部分便离开，许多已经加载却因为处于网页底部而未呈现在视口区的图片，它们极大加重服务器压力了但是用户看都没看，白白浪费了性能。

  为了解决上面的问题需要引入图片懒加载，懒加载其实很好理解，重点就是一个‘懒'字。当用户滚动相应可视区域，若可视区域有图片便加载，而在可视区域外未加载过的图片它们先不加载，如果用户滚动可视区域到它们时它们再加载，否则一律不加载。这样一来就大大提高了网页渲染的性能和减少不必要的浪费。

  首先，先定义一个基本的HTML页面模拟一些存在大量图片的网页，比如我用8个img 标签来模拟，同时定义一些基本css样式，代码与初始效果如下：

html：

css：

初始效果如下，可以看到右边的控制台，8张图片在我一运行这个页面的时候就都一同被加载渲染了：

下面是利用JavaScript实现懒加载的3种方式，原理都是判断图片是否出现在可视区后给图片赋值src属性。

  首先，修改每一个img标签，利用HTML提供的 data- 属性来嵌入自定义数据，这个自定义数据我们存放这个标签原本的图片地址。同时，全部的图片的src属性我们都用一张同样的图表示，这个图一般可为显示载入中字样的图片。注意，如果多个img标签src引用的是同一张图片，那么只会加载一次，不会多次加载，所以我下面给每个图src定义同一张图。

此时页面效果如下，：

接下来用JavaScript实现当我们滚动滚动条时，如果图片出现在可视区，那么加载图片。加载图片其实就是给img标签src属性赋值为本来的地址，那么此时图片便会请求加载渲染出来。