JavaScript的预加载与懒加载

2016-11-22

1. 预加载
- 1.1. 目的
- 1.2. 做法
2. 懒加载

预加载

目的

　　增强用户的体验，当用户需要查看时可直接从本地缓存中渲染。。否则，如果一个页面的内容过于庞大，没有使用预加载技术的页面就会长时间的展现为一片空白。但会加载服务器的负担。并且，如果不设置预加载，那么当需要渲染十分大的图片时，可能就会有“逐行扫描渲染”的感觉，用户体验不好。使用预加载的话，我们可以在图片完整渲染完成之前在页面上设置“loading”类的图标提示，而当图片数据完全获取后一次性直接将图片展现出来，提升用户体验。

做法

典型方法如下：

function loadImage(url, callback) {
    var img = new Image();
    img.src = url;
    if (img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数 防止IE6不执行onload BUG
        callback.call(img);
        return;
    }
    img.onload = function () {
        callback.call(img);//将回调函数的this替换为Image对象
    };
};

懒加载

目的

　　延迟加载图片或符合某些条件时才加载某些图片。这样做的好处是减少不必要的请求。懒加载的主要目的是减轻服务端压力。

做法

纯粹的延迟加载，使用setTimeOut或setInterval进行加载延迟.
条件加载，符合某些条件，或触发了某些事件才开始异步下载。
可视区加载，即仅加载用户可以看到的区域，这个主要由监控滚动条来实现，一般会在距用户看到某图片前一定距离遍开始加载，这样能保证用户拉下时正好能看到图片。
案例
　　参考网上一篇例子：
网页与设备（浏览器）可视区域的关系：

当页面过长的时候就会出现滚动条，一旦滚动了一部分，上面的页面就会看不到，上图中绿色部分就是那被隐藏的部分页面。
那么，何时加载哪些图片，就是判断当前页面可视区域和图片位置的关系问题，判断是否在当前可视区域的顶部和底部的范围内，如果是就加载图，不是就不加载。

页面可视区域

1 2	viewTop = window.scrollY \|\| window.pageYOffset; viewBottom = window.innerHeight + viewTop;

viewTop表示可视区域顶部在整个文档Y方向上的坐标
viewBottom表示可视区域底部在整个文档Y方向上的坐标

图片区域

1 2	nodeTop = node.getBoundingClientRect().top + viewTop; nodeBottom = nodeTop + node.offsetHeight;

nodeTop表示图片顶部在整个文档Y方向上的坐标
nodeBottom表示图片底部在整个文档Y方向上的坐标

JavaScript

预加载

目的

做法

懒加载

目的

做法

案例