实现一个懒加载

什么是懒加载

懒加载，又叫“延迟加载”，英文名“lazy load”。
懒加载实际就是将页面上所有的图片都换成一个相同的路径，当用户滚动看到图片时，再将路径换成图片的原路径。
我们假设一个有页面，页面上存在有很多的图片。当用户加载这个页面的时候，会展示出当前视窗的图片，而用户看不到的图片，则用相同的图片去替代。用户如果滚动不到之后的图片，将不会被加载出来，而当用户滚动之后，后面的图片会改成真实的图片去展示。

那么使用懒加载的好处是什么呢？

1. 节省流量，缓解浏览器的压力
2. 增强用户体验，感觉更快速

如何实现一个懒加载

要实现一个懒加载，主要是实现两个功能：一个是判断当前元素是否出现在视窗内，另一个是将页面中所有的图片都用同一个路径，等到用户滚动页面看到的时候，再换成真实的路径。

1. 元素位置的判断

如下图所示：

view.png

我们假设红色的框表示用户看到的窗口，窗口内有一段文字，蓝色的框表示整个页面。页面滚动到当前位置时，窗口内出现了这行字。
那么可以做判断，当用户滚动的距离（$(window).scrollTop()），加上窗口的距离（$(window).height()）大于等于当前元素在页面的距离（$(node).offset().top）就表示当前元素出现在视窗内。

2.更换图片的路径

我们可以将图片的“假”路径写在scr中，用户是看不到这些图片的，将图片的实际路径写在自定义的属性中。当用户滚动页面看到图片时，就将图片的scr改成真实的，这样用户就能看到真实的图片。

下面我们简单用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)
        }
    })
})

这样一个简单的懒加载功能就实现啦