什么是懒加载
懒加载，又叫“延迟加载”，英文名“lazy load”。
懒加载实际就是将页面上所有的图片都换成一个相同的路径，当用户滚动看到图片时，再将路径换成图片的原路径。
我们假设一个有页面，页面上存在有很多的图片。当用户加载这个页面的时候，会展示出当前视窗的图片，而用户看不到的图片，则用相同的图片去替代。用户如果滚动不到之后的图片，将不会被加载出来，而当用户滚动之后，后面的图片会改成真实的图片去展示。
那么使用懒加载的好处是什么呢？
- 节省流量，缓解浏览器的压力
- 增强用户体验，感觉更快速
如何实现一个懒加载
要实现一个懒加载，主要是实现两个功能：一个是判断当前元素是否出现在视窗内，另一个是将页面中所有的图片都用同一个路径，等到用户滚动页面看到的时候，再换成真实的路径。
1. 元素位置的判断
如下图所示：
view.png
我们假设红色的框表示用户看到的窗口，窗口内有一段文字，蓝色的框表示整个页面。页面滚动到当前位置时，窗口内出现了这行字。
那么可以做判断，当用户滚动的距离（$(window).scrollTop()），加上窗口的距离（$(window).height()）大于等于当前元素在页面的距离（$(node).offset().top）就表示当前元素出现在视窗内。
2.更换图片的路径
我们可以将图片的“假”路径写在scr中，用户是看不到这些图片的，将图片的实际路径写在自定义的属性中。当用户滚动页面看到图片时，就将图片的scr改成真实的，这样用户就能看到真实的图片。
<img src="http://smashinghub.com/wp-content/uploads/2014/08/cool-loading-animated-gif-3.gif" alt="1" data-src="http://cdn.jirengu.com/book.jirengu.com/img/1.jpg">
下面我们简单用jQuery来实现上述的效果
- 声明一个函数
isShow，实现img在页面位置的判断
function isShow($node) {
return $node.offset().top <= $(window).scrollTop() + $(window).height()
}
- 声明一个函数和
loadImg，实现更换图片路径的功能
function loadImg($img) {
$img.attr('src', $img.attr('data-src'))
}
- 最后绑定一个滚动事件，实现整个懒加载的功能
$(window).on('scroll', function () {
$('.container img').each(function () {
var $node = $(this)
if (isShow($node)) {
loadImg($node)
}
})
})
这样一个简单的懒加载功能就实现啦
