页面优化之懒加载与预加载

1.前言

PC端网速较快，现在普通都是百兆宽带，那么折算一下就是10M/s的下载速度，基本上资源如果在10M以内的话加载还是比较快的。

但是移动端就不行了。移动端需要消耗巨额的流量，所以尽量减少移动端流量消耗成为了移动端Web页面的一个重要需求。

一般前端页面的加载方式就分为两种：懒加载和预加载，懒加载也叫lazyload，两者容易混淆，

2.预加载

2.1预加载运用场景

在制作图片墙，相册这样的单页图片资源比较大的页面时，为了能让用户有流畅的使用体验，需要提前将图片缓存到本地，这就是图片预加载的用途。

2.2预加载的使用

优先加载图片，加载图片时显示loading图或者动画，然后再显示页面，这样用户就无需等待页面的空白而残忍地关闭页面了

var imgs = []

function imgPreload(url, len, cb) {
    var img = new Image(), flag = 0
    img.onload = function () {
        flag++
        if (flag === len) {
            cb();
        }
    };
    img.onerror = function () {

    };
    img.src = url;
}

for (var i = 0, len = imgs.length; i < len; i++) {
    imgPreload(
        imgs[i], len,
        function () {
            // 显示页面
        }
    )
}

2.3预加载的缺陷

预加载一般是由于本身资源文件巨大，所以提前加载，这样的话加载时间也是比较长的。如果页面上图片很多，但是可以做按需加载那么就尽量不要使用预加载了。

注意：预加载只是把图片加载提前，并没有改变页面加载图片的数量。

3.懒加载

3.1使用场景

一般情况下资源比较多而且不需要一次性显示所有的图片

3.2实现

与预加载原理类似只是执行的时机不同，另外需要写一个图片地址列表以便加载图片

4.预加载和懒加载的妙用

页面上有多个按钮，并且需要点击之后展示不同的3d轮播图，此时资源图太大需要优化，例如用swiper实现

使用懒加载：点击弹窗之后加载本弹窗所需的图片，之后再初始化swiper，只需要一个swiper（替换图片就可以了）

使用预加载：所有图片预先加载，有一段等待时间，加载完之后swiper初始化（多个swiper列举了所有弹层）

然而这两种方法最后都有后遗症：

懒加载偶尔有时候swiper错乱，但是滑动之后又正常.........................................（略去一万字）

预加载时间又太长.............................

直到有大佬提醒了我我才搞定，那么是什么方法呢？

还是使用预加载：当滚动过了第一屏的时候，把所有的图片元素放到一个隐藏的div中去，让它去默默加载。直到点击弹层的时候，这时候必定已经加载完毕，把对应的图片添加到swiper中去然后初始化就可以了