基本效果同前一篇，業(yè)務(wù)有所變化：前一篇是先顯示進(jìn)度條待所有的圖片加載完成了再顯示圖片，這一篇是先顯示第一張圖片然后依次加載其他圖片（比較適合于有內(nèi)容的圖片，人在看第一張圖片時(shí)程序默默的加載后面的圖片）

?

然后還是那幾句：

這個(gè)特效是跟著慕課網(wǎng)上的視頻學(xué)的，視頻鏈接如下：https://www.imooc.com/learn/502
源碼和技術(shù)點(diǎn)已經(jīng)上傳到附件，有需要的可以查看、下載。

?

下面直接上代碼（PS：代碼中的注釋是根據(jù)個(gè)人理解添加的，并不是老師原有的注釋）：

1、頁(yè)面基本結(jié)構(gòu)：

<div class="box"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498048638722&di=93633bebf0b1fc921fc42e8d0644e9c1&imgtype=0&src=http%3A%2F%2Fatt.bbs.duowan.com%2Fforum%2F201604%2F12%2F210015dj7ay5yw9ylaymmn.jpg" id="imgArea"width="1200"/><p><a href="javascript:void(0)" class="btn" data-control="prev">上一頁(yè)</a><a href="javascript:void(0)" class="btn" data-control="next">下一頁(yè)</a></p> </div>

2、CSS樣式：

<style> html,body{margin: 0;padding: 0; } a{text-decoration: none;} .box{text-align: center;} .btn{display:inline-block;height:40px;line-height: 40px;border:1px solid #ccc;background-color: #fff;padding: 0 15px;margin-right:50px;color:#333; } .btn:hover {background-color: #eee; } </style>

3、JS代碼（附件中JS文件夾下demo2_preload(有序加載，非插件).js）：

//圖片數(shù)組 var imgs=["https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498048638722&di=93633bebf0b1fc921fc42e8d0644e9c1&imgtype=0&src=http%3A%2F%2Fatt.bbs.duowan.com%2Fforum%2F201604%2F12%2F210015dj7ay5yw9ylaymmn.jpg","https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498046785208&di=2e693fe255f7dc064bf940d16b5d8b6b&imgtype=0&src=http%3A%2F%2Fbbsfiles.vivo.com.cn%2Fvivobbs%2Fattachment%2Fforum%2F201601%2F06%2F113313hbbbrf3fqw3qzbxp.jpg","https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498046876926&di=78448958bad3463d63acb892052582fa&imgtype=0&src=http%3A%2F%2Fstatic01.coloros.com%2Fbbs%2Fdata%2Fattachment%2Fforum%2F201506%2F22%2F230200woaarrmta41rgket.jpg","https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498046913853&di=ee33b4635aa2fad919360084ff52ff43&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201502%2F13%2F174551vk3qq9nyeq965kml.jpg","https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498046893014&di=d038443067de0796e68e70464768da83&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201410%2F25%2F220832wlwzqq6ble9ql6rd.jpg","https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498046883822&di=9190192e9187c4f9098eded1b593b5f4&imgtype=0&src=http%3A%2F%2Fattach.bbs.miui.com%2Fforum%2F201503%2F06%2F162347xwvgpdfpw5p7rvvv.jpg","https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498641626&di=6405f296231e22070f1e2eeafe631b88&imgtype=jpg&er=1&src=http%3A%2F%2Fwww.iforworld.com%2Fbizhi%2F4k%2Fpic%2F20160224%2F003.JPG","https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1498046940019&di=b91053d71c20207d04cfc6d3cb386067&imgtype=0&src=http%3A%2F%2Fi7.download.fd.pchome.net%2Ft_2560x1600%2Fg1%2FM00%2F12%2F1A%2FooYBAFaxvnaIYS82AB4dTtRS-E4AAC3fwLtL7EAHh1m451.jpg"]; var len = imgs.length;//圖片數(shù)量 var count=0;//加載到了第幾張圖片 var index = 0;//當(dāng)前瀏覽到的第幾張圖片 $(function(){load();//開(kāi)始加載圖片//按鈕的點(diǎn)擊事件$(".btn").click(function(){if("prev"===$(this).attr("data-control")){//上一張index--;//下標(biāo)減小if(index<0) index = 0;//index = Math.max(0,--index);//index先--，之后得到的值與0比較，返回較大的值}else{//下一張index++;//下標(biāo)增大if(index>len-1){//數(shù)組下標(biāo)從0開(kāi)始index = len-1;}//index = Math.min(len-1,++index);}document.title=(index+1)+"/"+len;$("#imgArea").attr("src",imgs[index]);});//有序加載圖片function load(){var imgObj = new Image();$(imgObj).bind("load error",function(){if(count>=len){//說(shuō)明圖片加載完成了}else{load();//繼續(xù)加載}count++;});imgObj.src = imgs[count];} });

4、將第三步中加載圖片的代碼寫(xiě)成插件進(jìn)行調(diào)用：
插件代碼（附件中JS文件夾下preload.js）：

//圖片預(yù)加載//使用閉包模擬局部作用域 /* (function(){ })(); *///傳入jQuery對(duì)象，用$來(lái)接收，這樣子就可以使用jQuery了 /* (function($){ })(jQuery); */(function($){//構(gòu)造函數(shù)//imgs:圖片數(shù)組//options:參數(shù)function PreLoad(imgs,options){//若傳入圖片數(shù)組的是字符串，手動(dòng)轉(zhuǎn)成數(shù)組this.imgs = ((typeof imgs)==="string"?[imgs]:imgs);//將傳入的options參數(shù)替換掉默認(rèn)的PreLoad.DEFAULTS，生成一個(gè)新的對(duì)象，并返回給this.optsthis.opts = $.extend({},PreLoad.DEFAULTS,options);if(this.opts.order==='ordered'){//有序加載this._ordered();//調(diào)用有序加載的方法}else{//無(wú)序方法:下劃線表示這個(gè)方法只在內(nèi)部使用，不提供外部調(diào)用this._unordered();}}//設(shè)置默認(rèn)參數(shù)PreLoad.DEFAULTS={order:'unordered',//默認(rèn)采用無(wú)序加載each:null,//每一張圖片加載完成后執(zhí)行all:null//所有圖片加載完成后執(zhí)行};//在原型上添加無(wú)序加載的代碼PreLoad.prototype._unordered=function(){//預(yù)加載各張圖片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.src = src;//正常加載或加載失敗都執(zhí)行該方法，以避免“加載失敗時(shí)頁(yè)面一直都顯示正在加載數(shù)據(jù)”的問(wèn)題$(imgObj).bind("load error",function(){opts.each && opts.each(count);//當(dāng)圖片預(yù)加載完成顯示第一張圖片的信息if(count>=len-1){//顯示圖片opts.all && opts.all();//若是有all就調(diào)用all()方法}count++;});});};//在原型上添加有序加載的代碼PreLoad.prototype._ordered=function(){//預(yù)加載各張圖片var imgs = this.imgs,opts = this.opts,count = 0,len = imgs.length;load();function load(){var imgObj = new Image();$(imgObj).bind("load error",function(){opts.each && opts.each(count);if(count>=len){//說(shuō)明圖片加載完成了opts.all && opts.all();//若是有all就調(diào)用all()方法}else{load();//繼續(xù)加載}count++;});imgObj.src = imgs[count];}};//定義一個(gè)工具方法$.extend({preload:function(imgs,opts){new PreLoad(imgs,opts);}}); })(jQuery);//插件學(xué)習(xí)方法： //無(wú)序加載：http://www.imooc.com/video/14434/0 //有序加載：https://www.imooc.com/video/14440

該有序加載的插件是在原來(lái)的無(wú)需加載插件的基礎(chǔ)上改的，改動(dòng)的主要有三個(gè)地方：

a、function PreLoad(中添加判斷：

if(this.opts.order==='ordered'){//有序加載this._ordered();//調(diào)用有序加載的方法 }else{//無(wú)序方法:下劃線表示這個(gè)方法只在內(nèi)部使用，不提供外部調(diào)用this._unordered(); }

?

b、PreLoad.DEFAULTS={中添加屬性：order:'unordered',//默認(rèn)采用無(wú)序加載

?

c、添加_ordered方法：

//在原型上添加有序加載的代碼 PreLoad.prototype._ordered=function(){//預(yù)加載各張圖片var imgs = this.imgs,opts = this.opts,count = 0,len = imgs.length;load();function load(){var imgObj = new Image();$(imgObj).bind("load error",function(){opts.each && opts.each(count);if(count>=len){//說(shuō)明圖片加載完成了opts.all && opts.all();//若是有all就調(diào)用all()方法}else{load();//繼續(xù)加載}count++;});imgObj.src = imgs[count];} };

頁(yè)面調(diào)用：第三步JS中“有序加載圖片”的代碼由原來(lái)的改成以下內(nèi)容：

//使用插件加載圖片 $.preload(imgs,{order:'ordered'//使用有序加載 });

（PS：附件中的demo2(圖片有序加載).html就是使用插件進(jìn)行加載的）

最后，感謝老師，也祝大家好運(yùn)！

?

?

總結(jié)

以上是生活随笔為你收集整理的图片预加载学习(二)：有序加载之图片切换的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。