Web:预加载与延时加载

最近做了个某珠宝的微信活动页面。由于每个活动页面都有一张背景图，在移动端网速不佳的时候，每翻一页，都会有较长时间的空白页出现。这种体验当然是不能够接受的。

为了避免这种情况，使用图片预加载，当用户进入首页浏览的时候，其实已经把之后几页的背景图已经下载好，在翻页的时候，因为背景图片资源已经加载过一遍，浏览器直接使用缓存就行，并不需要再额外加载一次。

预加载

这是首次加载的时候，浏览器的请求个数，红框内的资源就是之后所需要用的背景图。

这是翻页至第二页时的请求，红框内的就是第三页所需要的资源。可以看到，这次并没有请求背景图片资源，因为该资源已经存在，当前页面直接调用就行。

之后几页的请求都类似这样。

页面切换时，用到了这个库 mobilebone

下面的代码是预加载的实现

function preload(){            var preloadImg = [                {                    path:'img/smurfs-bg.jpg',                    classname :"bg"                },                {                    path:'img/garden-bg.jpg',                    classname :"bg"                },                {                    path:'img/life-bg.jpg',                    classname :"bg"                },                {                    path:'img/love-bg.jpg',                    classname :"bg"                },                {                    path:'img/share-bg.jpg',                    classname :"bg"                }            ],                preloadImgArr = [];            for (var i = 0; i < 5; i++) {                (function(i){                    var img = new Image();                    img.src =preloadImg[i].path;                    img.className = preloadImg[i].classname;                    preloadImgArr.push(img);                })(i);            };            return preloadImgArr;        };

在首页window.onload之后 执行这个函数。为什么要在window.onload之后执行，请移步这里

该函数执行后，会返回一个数组，数组中的每一个值就是一个img对象，在进行切换的时候，在回调函数中插入对应的img对象，就像这样：

oDiv.appendChild(imgObj[0]),

把数组中的第一个值插入到某个div中。

因为加载DOM的时候，图片，音频，视频等资源是分开加载的，所以我们可以提前加载这些耗时的资源，在稍后的访问中，可以节省请求时间。

延时加载

同样，有预加载，就有延时加载。实现过程跟预加载挺像。

在切换页面的时候，想让DOM全部加载完之后，以间隔的时间加载某些资源。

同样是在window.onload之后，生成这些资源对象，然后往对应的节点插入即可。

load_page_pro: function() {                    var oDiv = document.getElementById("smurfs-bg");                    oDiv.appendChild(imgObj[0]),                        oPro = document.getElementById('smurfs'),                        imgArr = [                            {                                path:'img/smurfs01.png',                                className:"smurfs01"                            },                            {                                path:'img/smurfs02.png',                                className:"smurfs02"                            },                            {                                path:'img/smurfs03.png',                                className:"smurfs03"                            },                            ],                        i = 0,                timer = setInterval(function(){                                 var img = new Image();                                img.src = imgArr[i].path,                                img.className = img.className + imgArr[i].className;                                oPro.appendChild(img);                                i++;                                if(i==3){                                    clearInterval(timer);                                }                            }, 600);                    },

这个函数主要实现了一下：
切换页面时，回调函数执行该函数，加载当前页的背景图片，DOM全部加载完后，又生成3个图片资源，这三个图片资源每个600毫秒出现在页面中。

这个函数定义在window.onload中，当切换页面时，回调函数会执行该函数。在setInterval函数中，定义了个匿名函数，每执行一次时，会生成个img对象。关于new Image() 和 document.createElement(‘img’)的差别，请移步这里

图中红框内的资源就是DOM加载完再生成的。

其实不管是延时加载还是预加载，都是适当的减少当前页面请求，提前获取资源，或者延迟生成资源，实现起来并没有太大的差异。