图片预加载与懒加载

一、预加载

前面做了个招聘页面，里面有大量的图片需要加载。

一开始都是全部写在页面中，在测试环境还看不出很慢，一放到正式环境就不对了。

微信浏览器本来就觉得慢，现在一下子要加载这么多图片，一下子就把屏幕弄白了，过了几十秒后才会完整的出现Loading图片。

这显然是无法忍受的，马上就加了预加载的功能，我只是简单的使用了一下。

预加载就是通过Image对象，给这个对象添加“src”属性，并可以将此对象缓存起来，以后再使用。

<img src="blank.png" data-src="img/p2/1.png" class="img1">

我先给img赋个空白图，然后通过JS来给src赋data-src中的值，预加载的逻辑从网上找到了相关代码。

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对象
    };
};

在GTmetrix网上做了下性能测试，这个网站会提出改进的建议，并会说明这个改进的具体说明。

还配备了YSlow和PageSpeed性能工具。

在Waterfall中有资源加载记录，加了data-src属性的图片会在JS脚本之后再载入，这样的话就不会影响Loading效果显示了。

 

二、懒加载

一般懒加载就是当你做滚动到页面某个位置，然后再显示当前位置的图片，这样做可以减少页面请求。

参考了两个比较火的开源库，jquery_lazyload和layzr.js，两者的人气都很足，不过前者是需要引入jQuery库的，后者不需要。

当页面过长的时候就会出现滚动条，而当年滚动到下面的时候，上面的页面就会看不到，下图中绿色部分就是那隐藏的页面。

通过计算，可以获取图片的两个距离值，图中标注了，然后判断是否在当前可视区域的顶部和底部的范围内，如果是就加载图，不是就不加载。

假设滚动条是在body中，那么当前可视区域的范围是：

viewTop = window.scrollY || window.pageYOffset;
viewBottom = window.innerHeight + viewTop;

而图片的top和height是：

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

在上面出现了几个尺寸的概念。

Window.scrollY 与 Window.pageYOffset意思差不多，指的是滚动条顶部到网页顶部的距离。

Window.innerHeight 表示该容器中页面视图区的高度（减去边框宽度）。

Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。

HTMLElement.offsetHeight = height+padding+border。

更多的尺寸属性可以参考《JavaScript中尺寸、坐标》

最后在给某个容器绑定“scroll”事件，上面的话是给“window”绑定。

 

参考资料：

Javascript图片预加载详解