跟着Apple学布局（二）：懒加载及其延伸

一、继续研究scroll事件

上一期我们用scroll事件和相对定位实现了两栏异速滚动——传送门。接着往下看，不得不承认在苹果的控制下，浏览网页的过程仿佛成了一段奇妙的冒险，随着滑块的滚动，各式各样的特效总会让你感到惊喜。我会在这篇文里总结这些特效的精髓，后面类似的东西就不去一一实现了，以便尽快给大家带来更多更有用的干货。

二、图片懒加载

懒加载很实用，理解起来又很简单，从效果上看就是整个页面的图片不会一次性加载完成，而是滚动条将要滚动到什么位置，图片就提前加载到什么位置，相当于三碗米饭一顿吃完和分成三顿吃的区别，大大减少了系统资源的消耗。怎么实现呢？随便找一篇相关博客看看：

$(function(){
    var viewportSize = $(window).height();
    var lazyload = function(){
        var scrollTop = $(window).scrollTop();
        $("img").each(function(){
            var _this = $(this);
            var x = viewportSize + scrollTop + _this.position().top;
            if(x>0){
                _this.attr("src",_this.attr("loadpic"));
            }
        })
    }
    setInterval(lazyload,1000);
})

这段代码的思路很清晰：每一秒钟对所有图片进行一次检查：如果滚动条滚动到图片的位置，就加载图片的src属性。这是最容易想到的办法，但仔细想想，网页打开后的每一秒钟都要把所有的图片遍历一次，是不是有些恐怖？！至少已经加载了src属性的图片是不需要再参加遍历的，更加恐怖的是不止一篇技术文章给出了类似的实现方法。想到这里，我似乎找到了这篇水文存在的意义，话不多说，直接上我的代码：

const lazyLoad = function (container, src_array, target) {  //参数：图片的父容器，储存图片src属性的数组，距离图片多远则加载图片
    let index = 0;
    const pics = container.querySelectorAll("img");
    const length = pics.length; //准备工作
    const repeat = function () {
        if (pics[index].offsetTop - document.body.scrollTop < target) {
            pics[index].setAttribute("src", src_array[index]);
            index++;
            if (index === length) {
                clearInterval(timer);
            }
        }
    };  //核心函数
    const timer = setInterval(function () {
        repeat();
    }, 200);
};

lazyLoad(column, src_array, 400);  //调用lazyLoad函数

与第一段代码最大的不同在于核心函数repeat，它并没有直接遍历所有图片，而是借用setInterval函数，逐个检查单张图片是否符合加载的要求：

前提是container里的图片是依次竖向排列的（横向排列还玩什么懒加载），setInterval会不断触发repeat函数（当然用scroll事件也可以，只不过性能会下降一些）。由于index变量初始值为0，repeat函数执行时会专门判断第一张图片是否可以加载，到了加载距离时，第一张图片加载，index变为1，此后repeat函数开始专门对第二张图片进行检查，直到第二张图片符合加载要求……

如此算来，与第一段代码相比，图片有多少张，性能就会提升多少倍，老板很开心，但我们并不满足于此，如果把repeat函数中设置图片src属性的代码换成其他操作，lazyLoad函数（此时就应该换成其他名字了）的普适性不就更强了吗？

三、说换就换

const lazyFn = function (container, target, fn) {
    let index = 0;
    const contents = container.children;
    const length = contents.length;
    const repeat = function () {
        if (contents[index].offsetTop - document.body.scrollTop < target) {
            fn(contents[index])
            index++;
            if (index === length) {
                clearInterval(timer);
            }
        }
    };
    const timer = setInterval(function () {
        repeat();
    }, 200);
};

与上面的懒加载函数相比，container的子元素不一定非要是img了，处理函数也可以通过传入参数自定义，这样MacOS最新发布的版本图片链接中的很多特效都可以用该函数来实现：

看不清的gif

动图快结束的时候，div1下面还有很大一段空白，再往下拉一点点，div2出现了，并逐渐往上滑动到它本该处的位置。思路就是给div2的初始样式设置为透明度0，向下偏移一段距离；最终样式设置为一个类，透明度为1，竖向偏移为0，在上面的lazyFn中传入把这个类赋给div2函数，就可以实现当滚动条滚动到一定位置时，切换div2的样式，最后通过设置transition添加渐变效果。完整代码请查看 https://github.com/xyst123/lazyFn（内附魔性的demo）。