-
1 # 碼農遊者
-
2 # 小石猴
在開發H5專案中有時候會遇到要載入大量圖片的情況，利用預載入技術可以提高使用者瀏覽時的體驗。
1)概念：
懶載入也叫延遲載入：JS圖片延遲載入,延遲載入圖片或符合某些條件時才載入某些圖片。
預載入：提前載入圖片，當用戶需要檢視時可直接從本地快取中渲染。
2)區別：
兩種技術的本質：兩者的行為是相反的，一個是提前載入，一個是遲緩甚至不載入。懶載入對伺服器前端有一定的緩解壓力作用，預載入則會增加伺服器前端壓力。
伺服器端區別：懶載入的主要目的是作為伺服器前端的最佳化，減少請求數或延遲請求數。預載入可以說是犧牲伺服器前端效能，換取更好的使用者體驗，這樣可以使使用者的操作得到最快的反映。
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>preload</title>
<style>
* {
margin: 0;
pading: 0;
}
a {
text-decoration: none;
}
.box {
text-align: center;
}
.btn {
display: inline-block;
height: 30px;
line-height: 30px;
border: 1px solid #ccc;
background: #fff;
padding: 0 10px;
margin-right: 50px;
color: #333;
}
.btn:hover {
background: #eee;
}
/*進度條樣式*/
.loading {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
//撐滿整個螢幕 background: #eee;
text-align: center;
font-size: 30px;
font-weight: bold;
}
.progress {
margin-top: 300px;
}
</style>
</head>
<body>
有序預載入可以不寫進度條，載入完第一張後立即載入第二張、第三張、第四張...
-->
<div>
<img src="http://image.hnol.net/c/2010-11/14/21/201011142147143181-239867.jpg" width="1000">
<p>
</p>
</div>
<div>
<p>0%</p>
</div>
<script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script src="~/Scripts/preload.js"></script>
<script>
var imgs = ["http://image.hnol.net/c/2010-11/14/21/201011142147143181-239867.jpg",
"http://www.picperweek.com/resource/image/dbc3c16b-5fc6-48e5-aa48-c64739739da2.png",
"http://imgstore.cdn.sogou.com/app/a/100540002/406526.jpg"],
index = 0,
len = imgs.length;
$progress = $(".progress");
//有序預載入,可以不用寫進度條部分，如果有寫，需要手動配置each()、all()方法
// $.preload(imgs,{
// order:"ordered"
// });
//呼叫無序預載入 --imgs 陣列存放預載入的圖片
$.preload(imgs, {
//每張圖片載入(load事件)一次觸發一次each()
each: function (count) {
//進度條顯示百分比進度
$progress.html(Math.round((count + 1) / len * 100) + "%");
},
//載入完畢
all: function () {
$(".loading").hide();
document.title = "1/" + len;//初始化第一張
}
});
//未封裝成外掛的無序預載入
// $.each(imgs,function(i,src){
// var imgObj = new Image(); //Image()例項用於快取圖片
//
// $(imgObj).on("load error",function(){
// $progress.html(Math.round((count + 1) / len * 100) + "%");
//
// if(count >= len - 1){
// $(".loading").hide();
// document.title = "1/" + len;
// }
// count++;//每載入完一張圖片count加1
// });
//
// imgObj.src = src;//快取圖片
// });
$(".btn").on("click", function () {
if ("prev" === $(this).data("control")) {
index = Math.max(0, --index);
} else {
index = Math.min(len - 1, ++index);
}
document.title = (index + 1) + "/" + len;
$("img").attr("src", imgs[index]);
});
</script>
</body>
</html>
外掛：
; (function ($) {
function PreLoad(imgs, options) {
//儲存圖片到陣列
this.imgs = (typeof imgs === "string") ? [imgs] : imgs;
this.opts = $.extend(PreLoad.defaults, options);
// this._unordered();//如果只有無序預載入
if (this.opts.order === "ordered") {
this._ordered();
} else {
this._unordered();//預設是無序預載入
}
};
PreLoad.defaults = {
order: "unordered", //指定預設載入方式為無序
each: null, //每一張圖片載入完畢後執行
all: null //所有圖片載入完畢後執行
};
//有序預載入
PreLoad.prototype._ordered = function () {
var opts = this.opts,
imgs = this.imgs,
len = imgs.length,
count = 0;
load();
function load() {
var imgObj = new Image();
$(imgObj).on("load error", function () {
//相當於if(opts.each){ opts.each(); } ，如果有配置each()方法則呼叫，後面的all()同理
opts.each && opts.each(count);
if (count >= len) {
//所有圖片載入完畢
opts.all && opts.all();
} else {
//如果沒載入完，繼續呼叫自身載入下一張
load();
}
count++;
});
imgObj.src = imgs[count];//快取圖片
};
};
//無序載入
PreLoad.prototype._unordered = function () {
var imgs = this.imgs,
opts = this.opts,
count = 0,
len = imgs.length;
$.each(imgs, function (i, src) {
//判斷圖片陣列中的每一項是否為字串，不是字串會導致出錯，因此返回
if (typeof src != "string") return;
var imgObj = new Image();
$(imgObj).on("load error", function () {
//判斷opts.each是否存在，不存在則不執行
opts.each && opts.each(count);
if (count >= len - 1) {
//判斷opts.all是否存在，存在則執行
opts.all && opts.all();
}
count++;
});
imgObj.src = src;//快取圖片
});
};
//由於不用具體的物件去呼叫，因此用$.extend(object)掛載外掛.
$.extend({
//preload為外掛名
preload: function (imgs, opts) {
new PreLoad(imgs, opts);
}
});
})(jQuery);
回覆列表
關於如何使用jquery預載入圖片，直接給你段程式碼。
如下：
<script type="text/javascript" src="jquery/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="image/jquery.lazyload.js"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
$("img").lazyload({
effect: "fadeIn"
});
});
</script>
<img src="預載入圖片地址" data-original="實際圖片地址" border="0" />