課程前言：

慕課網(wǎng) --?圖片預(yù)加載

圖片預(yù)加載的特點(diǎn)：

（ 1、網(wǎng)站的Loading頁(yè)? 2、局部圖片的加載--表情插件? 3、漫畫(huà)網(wǎng)站? ）

（圖片過(guò)多時(shí)，會(huì)提高加載時(shí)間，降低性能）

1. 預(yù)知用戶將要發(fā)生的行為，提前加載用戶所需圖片；2. 更好的用戶體驗(yàn)；

圖片預(yù)加載又分為有序加載和無(wú)序加載，根據(jù)網(wǎng)站或功能模塊使用，提高用戶體驗(yàn)。

預(yù)加載與懶加載：

圖片預(yù)加載顧名思義圖片預(yù)加載就是在網(wǎng)頁(yè)全部加載之前提前加載圖片。當(dāng)用戶需要查看時(shí)可直接從本地緩存中渲染以提供給用戶更好的體驗(yàn)減少等待的時(shí)間。否則如果一個(gè)頁(yè)面的內(nèi)容過(guò)于龐大沒(méi)有使用預(yù)加載技術(shù)的頁(yè)面就會(huì)長(zhǎng)時(shí)間的展現(xiàn)為一片空白這樣瀏覽者可能以為圖片預(yù)覽慢而沒(méi)興趣瀏覽把網(wǎng)頁(yè)關(guān)掉這時(shí)就需要圖片預(yù)加載。當(dāng)然這種做法實(shí)際上犧牲了服務(wù)器的性能換取了更好的用戶體驗(yàn)。

圖片懶加載緩載延遲加載圖片或符合某些條件時(shí)才加載某些圖片。這樣做的好處是減少不必要的訪問(wèn)數(shù)據(jù)庫(kù)或延遲訪問(wèn)數(shù)據(jù)庫(kù)的次數(shù)因?yàn)槊看卧L問(wèn)數(shù)據(jù)庫(kù)都是比較耗時(shí)的即只有真正使用該對(duì)象的數(shù)據(jù)時(shí)才會(huì)創(chuàng)建。懶加載的主要目的是作為服務(wù)器前端的優(yōu)化減少請(qǐng)求數(shù)或延遲請(qǐng)求數(shù)。

二、圖片預(yù)加載與懶加載的區(qū)別

兩者的行為是相反的一個(gè)是提前加載一個(gè)是遲緩甚至不加載。懶加載對(duì)服務(wù)器前端有一定的緩解壓力作用預(yù)載則會(huì)增加服務(wù)器前端壓力。

圖片預(yù)加載實(shí)例：

data-屬性的寫(xiě)法是在html5中新加的一種自定義屬性書(shū)寫(xiě)方式。JQuery可以通過(guò).data('名稱')進(jìn)行獲取,href="javascript:;"空鏈接

cmd +d 復(fù)制上一行 #id .class data-control?

樣式中，tac -- text-align:center; 因?yàn)?a 標(biāo)簽為內(nèi)聯(lián)標(biāo)簽，因此，需要將其設(shè)置為 display-inline 為block ,才可以為它設(shè)置寬高。按鈕不給寬度，只給高度，用padding來(lái)給出寬度。mr50 --- margin-right:50px; 圖片太大了，就給img設(shè)置寬，那高就會(huì)等比例縮放。

上一張下一張不能點(diǎn)擊生效的，把所有代碼寫(xiě)在$(function(){})里邊試試。$(function(){ ? ?... ? })

index=Math.max(0,--index); ?Math.max (,,,,,)返回其中所有待比較數(shù)據(jù)的最大值，我們點(diǎn)擊上一張圖片時(shí)，就將當(dāng)前的index先減減，然后，再跟0比較，如果已經(jīng)比0小，就返回0.

index =Math.min(length-1,++index); 返回最小的那個(gè)咯，這個(gè)是下一張時(shí)，index可能加的超過(guò)length的長(zhǎng)度，因此，就做了判斷。

鼠標(biāo)點(diǎn)擊事件

圖片加載頁(yè)(＾－＾)V

樣式上：占滿整個(gè)可視區(qū)域，不應(yīng)該隨著鼠標(biāo)的滾動(dòng)而上下移動(dòng)，于是，就是固定定位，top和left都是0，給它的寬高都是100%，但它的百分比是繼承父類或者父類的父類，所以，要給它們?cè)O(shè)定高為100%。

功能上：圖片預(yù)加載是將所有的圖片都加載出來(lái)。用new操作符 就是創(chuàng)建一個(gè)構(gòu)造函數(shù)的實(shí)例，Image是內(nèi)置的一個(gè)構(gòu)造函數(shù)。得到Image的實(shí)例后，就可以在這個(gè)實(shí)例上監(jiān)聽(tīng)事件，這里用到的事件是load 和 error。

效果上：$.each()中的每一個(gè)元素，都執(zhí)行如下的操作：先定義了圖片對(duì)象，而該對(duì)象，有兩個(gè)默認(rèn)的方法，加載成功和加載失敗，為了不卡住，無(wú)論是成功還是失敗，都執(zhí)行操作：將頁(yè)面.progress 里的 內(nèi)容替換為 一個(gè) 百分比，count+1 是當(dāng)前的圖片預(yù)加載的進(jìn)度，用Math.round 取整后，再*100，變?yōu)榘俜謹(jǐn)?shù)。接下來(lái)做出判斷，如果當(dāng)前的加載進(jìn)度，已經(jīng)為 圖片的總長(zhǎng)度，就將loading頁(yè)隱藏，并將title的提示改為第一張圖片。如果判斷之后發(fā)現(xiàn)沒(méi)有超過(guò)，就將加載進(jìn)度加1，繼續(xù)加載下一張圖片咯。當(dāng)前，我們不是要講每一張圖片對(duì)象的src屬性賦值是 數(shù)組里的src 呢。

最普通的實(shí)現(xiàn)咯

疑難解答：

為什么"給圖片綁定onload事件"要在"給圖片的src屬性賦值"之前？

JS內(nèi)部是按順序執(zhí)行的（可以認(rèn)為是同步執(zhí)行），假設(shè)"給圖片的src屬性賦值"在"給圖片綁定onload事件"之前，JS解釋器會(huì)先執(zhí)行賦值語(yǔ)句，src屬性被賦值后圖片開(kāi)始下載，但解釋器不會(huì)等待圖片加載完畢后再執(zhí)行下一條語(yǔ)句，因?yàn)榧虞d圖片這個(gè)過(guò)程是異步的（就像你可以一邊蹲坑一邊玩王者毒藥，當(dāng)然一邊放大一邊吸毒很不好）。也就是說(shuō)圖片加載的同時(shí)，可以執(zhí)行"給圖片綁定onload事件"，不過(guò)加載圖片這個(gè)異步過(guò)程可能在"給圖片綁定onload事件"之前就完成了（比如瀏覽器緩存了圖片），此時(shí)圖片加載完成后還沒(méi)有給圖片綁定onload事件，也就是說(shuō)圖片加載完成后什么也不會(huì)發(fā)生。

總而言之，"給圖片綁定onload事件"應(yīng)在"給圖片的src屬性賦值"之前，這樣就可以保證圖片加載完成后觸發(fā)onload事件。

組件化開(kāi)發(fā)：

動(dòng)力：可以解決當(dāng)前問(wèn)題，但沒(méi)有復(fù)用性，因此要組件化開(kāi)發(fā)。（我們將插件寫(xiě)在局部作用域中，使他們與外界互不干涉，互不影響；但JS沒(méi)有局部作用域的說(shuō)法，我們用 閉包 來(lái)模仿。）

(function(){……})()?? 在它里面定義的變量都是局部的，就不會(huì)和外面的變量沖突了。外面的括號(hào)里傳遞Jquery對(duì)象，里面的括號(hào)用 $ 符號(hào)來(lái)接收，這樣我們就可以在里面使用jQuery對(duì)象了。

面向?qū)ο蟮姆椒▉?lái)完成一個(gè)插件時(shí)，首先就是對(duì)象的構(gòu)造函數(shù)。

組件化：

構(gòu)造方法

默認(rèn)方法

面向?qū)ο笤停攸c(diǎn)來(lái)咯：

執(zhí)行咯

利用jquery創(chuàng)建插件的兩種方式，和調(diào)用形式。封裝出來(lái)方便使用：（對(duì)我而言，我不是很懂??）

可以使用了

如何使用呢？

可以使用了

1.jQuery.extend(object);為擴(kuò)展jQuery類本身.為類添加新的方法。

2.jQuery.fn.extend(object);給jQuery對(duì)象添加方法。

jQuery.fn.extend = jQuery.prototype.extend

留下小作業(yè)：

組件的封裝，自己要來(lái)補(bǔ)一補(bǔ)~