一、图片的懒加载和预加载
懒加载和本文要提到的预加载实际是不同的概念。
典型的懒加载，例如本博文章的图片，当用户滚动图片进入窗体的时候，才去加载；或者用户点击选项卡，原本隐藏的图片此时再去加载，这个也称之为懒加载。
而预加载则是，用户还没有行为发生，资源已经加载完毕，从这一定义来讲，我们传统图片啪啪啪全部加载完毕，本质上也是预加载，好处就在于，体验好啊，没有泛白或者菊花的出现。不足也很明显，那就是资源可能白白加载了，尤其视频之类的，小明打开bilibili就是来围观广告的，结果，百兆视频巴拉拉魔仙般全加载好了，搞得好像流量不要钱的样子，也是不可取的。
那有什么办法可以把懒加载的省资源省流量和预加载良好体验结合在一起呢？有一些比较好的案例，那就是基于用户行为的资源预加载。
二、基于用户行为的资源预加载
下图所示是一个常见的选项卡：
此选项卡对应面板内容是包含图片信息的，由于，选项卡是点击行为触发的切换效果，因此，后面的“美女2”和“美女3”按钮对应的图片如果不点击，用户是永远都看不到的，此时这两位美女图片就没必要加载，因为，很可能，用户不会点这两个选项卡按钮。
因此，选项卡2和3我们需要岁图片进行懒加载处理，也就是页面载入默认不加载的。
然后，我们通常的处理是当用户去点击选项卡按钮的时候，在对应面板呈现的时候，我们再去加载图片内容。于是，就存在这样一个不好的体验——由于内容呈现瞬时，而图片呈现是异步的，就很容易出现选项卡主体内容切换过来了，结果是个空白，过了会儿图片才出现。
其实，我们可以基于某些行为对此图进行不一样的预加载，来提示我们的浏览体验，怎么做呢？
我们绝大数用户都是鼠标去点击选项卡的，而点击选项卡之前会有其他一些行为发生，例如：
mouseover按钮的容器 → mouseover按钮 → mousedown按钮等。
于是，就给了我们机会，在click行为发生之前去预加载图片，例如，我们鼠标hover按钮的时候。一般一个用户hover一个按钮再click行为技术，说有0.5秒的时长一点都不为过吧，因为光鼠标按下再抬起就上百毫秒了。从hover到click之间的这段时间，已经足够我们图片进行预加载了。而hover到click的行为是极大概率事件。于是乎，我们通过提前捕捉用户的其他行为实现了懒加载和预加载的完美结合！
点击选项卡，十有八九图片瞬间就呈现了，就是因为你hover的时候，图片已经去加载了。大家有兴趣可以打开控制台观察资源的加载，就可以明白上面巴拉巴拉说的hover预加载是怎么回事了。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>用户行为预加载</title>
<style>
*{
margin: 0;
padding:0;
}
html{
font-family: "Helvetica Neue", Helvetica, sans-serif;
}
a{
color:#333;
text-decoration: none;
}
.container{
margin: 0 auto;
210px;
}
.tab{
margin: 20px 0;
}
.tab .tab-a{
font-size: 14px;
padding:4px;
}
.tab .active{
border-bottom: 2px solid #00BCD4;
}
.panel img {
display: none;
}
.panel .active{
display: inline-block;
}
</style>
<script src="../jquery-3.1.0.js"></script>
</head>
<body>
<div class="container">
<div id="tab" class="tab">
<a href="#" class="tab-a active">美女一</a>
<a href="#" class="tab-a">美女一</a>
<a href="#" class="tab-a">美女一</a>
</div>
<div id="panel" class="panel">
<img src="mv1.png" class="active">
<img data-src="mv2.png">
<img data-src="mv3.png">
</div>
</div>
</body>
<script>
$(function(){
var elAs = $("#tab a"),
elImgs = $("#panel img");
elAs.each(function(index,ele){
$(this).data("index",index).on("click",function(){
var target = elImgs.eq($(this).data('index'));
// 选项卡UI
$(this).addClass('active').siblings('a').removeClass('active');
// 面板显隐
target.addClass('active').siblings('img').removeClass('active');
});
});
// 本demo的最重点，hover行为预加载图片
elAs.on({
mouseenter: function() {
var target;
if (!this.preloaded) {
target = elImgs.eq($(this).data('index'));
// 图片地址换成真实地址
target.attr('src', target.attr('data-src')).removeAttr('data-src');
// 标记已加载
this.preloaded = true;
}
}
});
});
</script>
</html>
@ 转载处 本文地址：http://www.zhangxinxu.com/wordpress/?p=5419