关于图片的预加载以及延伸

图片的预加载不难，方式有很多种，本来不打算单独写一篇文章，因为网上有很多大神写的很好，本来转载一篇相关的优质文章就好了。直到我读了一篇文章，发现图片的预加载有不少延伸知识，于是加以整理，有了这篇文章。

加载

先谈谈加载的几种方法：

使用 CSS 进行图片加载

body:after {
    content: "";
    display: block;
    position: absolute;
    background: url("地址");
    width: 0;
    height: 0
}

这样做的话，图片都存在于本地，只是不在可视范围内。但有缺点，图片跟随文档一同加载，有时候我们为了提高文档的加载速度，那么这种方式方式就不适合了。

使用 JS 进行图片加载

//存放图片路径的数组
var imgSrcArr = [
  'imgsrc1',
  'imgsrc2',
  'imgsrc3',
  'imgsrc4'
];

var imgWrap = [];

function preloadImg(arr) {
  for(var i =0; i< arr.length ;i++) {
    imgWrap[i] = new Image();
    imgWrap[i].src = arr[i];
  }
}

preloadImg(imgSrcArr);

//或者延迟的文档加载完毕在加载图片

$(function () {
  preloadImg(imgSrcArr);
})

使用 CSS + JS 方式进行图片加载

.preload-img:after{
            content:"";
            background: url("地址");
        }

 /*比如我们写了上面的这样一个类，但是页面中没有用到，我们在文档加载完毕之后，给某个元素添加该类*/
$(function(){
    $("#target").addClass("preload-img")
})

使用 AJAX 方式进行图片加载

$(function(){
  $.get('图片的路径');
})
/*当然我们也可以写成一个函数，这里我就不演示了*/

‘预’加载

我们通常所说的预加载应该叫做懒加载，因为说‘预’的话，应该是预先、预测，也就是用户行为作出之后，我们再加载图片。比如图片已经滑动至窗口中央，用户一开始会看不到图片，然后紧接着，图片再加载出来。这就是懒加载，饭到了跟前才吃。

使用 JQuery 插件 Lazy Load 进行懒加载

Lazy Load 也叫惰性加载，延迟加载，顾名思义，就是在图片未到达可视区域时，不加载图片，我们常常在很多的优秀网站上看到类似的例子，例如迅雷、土豆、优酷等，由于一个网页的图片非常多，一次性加载增加服务器压力，而且用户未必会拉到底部，浪费用户流量，Lazy Load 采用按需加载，更快的加载速度从而达到优化网页的目的。

1.加载 JQuery , 并在 html 代码的底部包含进来

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

2.设置图片的占位符为 data-original , 给图片一个特别的标签, 像这样设置图片

<img class="lazy" data-original="img/example.jpg" width="640" height="480">

或者：

$(function(){
    $("img.lazy").lazyload();
});

注意：你必须给图片设置一个 height 和 width ，或者在 CSS 中定义，否则可能会影响到图片的显示。

3.插件选项

图片预先加载距离：threshold ，通过设置这个值，在图片未出现在可视区域的顶部距离这个值时加载。默认为 0 ，下面为设置 threshold 为 200 表示在图片距离可视区域还有 200 像素时加载。

$("img.lazy").lazyload({
    threshold :200
});

事件绑定加载的方式：event ，你可以使用 JQuery 的事件，例如 “click”、“mouseover” ，或者你也可以自定义事件，默认等待用户滚动，图片出现在可视区域。下面是使用 click：

$("img.lazy").lazyload({event:"click"});

显示效果：effect ，默认使用 show() ，你可以使用 fadeIn（逐渐出现）方式，代码如下：

$("img.lazy").lazyload({
    effect :"fadeIn"
});

图片限定在某个容器内：container ，你可以通过限定某个容器内容的图片才会生效，代码如下：

#container {
    height:600px;
    overflow: scroll;
}

$("img.lazy").lazyload({
     container: $("#container")
});

至于如何改进加载方法，使其成为懒加载，代码就不一一贴出了，这样会过于拖沓。

预加载

现在要介绍的才是真正的预加载，那就是用户还没有行为发生，资源已经加载完毕。也就是说，发现用户有浏览图片的倾向，就去加载图片，这是最合理的。也就是基于用户行为的资源预加载。

打个比方，在一个页面下的多个选项卡，当用户浏览完毕后，鼠标移到了第二个选项卡上，那么，这个时候，不待用户点击，直接进行第二个选项卡中图片的加载。这是最好的，因为用户下一个动作很大概率会是点击，而图片已经加载好了，对于用户而言，体验最好，也最省流量。

当然了，行为预测的方式有很多，例如绝大数用户都是鼠标去点击选项卡的，而点击选项卡之前会有其他一些行为发生，例如：

mouseover() 按钮的容器 → mouseover() 按钮 → mousedown() 按钮等。

于是，就给了我们机会，在click行为发生之前去预加载图片，例如，我们鼠标hover按钮的时候。一般一个用户hover一个按钮再click行为技术，说有0.5秒的时长一点都不为过吧，因为光鼠标按下再抬起就上百毫秒了。从hover到click之间的这段时间，已经足够我们图片进行预加载了。而hover到click的行为是极大概率事件。于是乎，我们通过提前捕捉用户的其他行为实现了懒加载和预加载的完美结合！

同样的，代码我就不贴上了，预加载的实现是基于对懒加载的事件触发进行合理的选择。自己试试吧。

参考文章：