課程前言：

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

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

（ 1欢伏、網(wǎng)站的Loading頁? 2、局部圖片的加載--表情插件? 3亿乳、漫畫網(wǎng)站? ）

（圖片過多時硝拧，會提高加載時間，降低性能）

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

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

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

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

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

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

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

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

data-屬性的寫法是在html5中新加的一種自定義屬性書寫方式幔虏。JQuery可以通過.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來給出寬度烟逊。mr50 --- margin-right:50px; 圖片太大了，就給img設(shè)置寬踪栋，那高就會等比例縮放焙格。

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

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

index =Math.min(length-1,++index); 返回最小的那個咯，這個是下一張時驳庭，index可能加的超過length的長度刑顺，因此，就做了判斷饲常。

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

圖片加載頁(＾－＾)V

樣式上：占滿整個可視區(qū)域蹲堂，不應(yīng)該隨著鼠標(biāo)的滾動而上下移動，于是贝淤，就是固定定位柒竞，top和left都是0，給它的寬高都是100%播聪，但它的百分比是繼承父類或者父類的父類朽基，所以，要給它們設(shè)定高為100%离陶。

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

效果上：$.each()中的每一個元素茸苇，都執(zhí)行如下的操作：先定義了圖片對象，而該對象沦寂，有兩個默認(rèn)的方法学密，加載成功和加載失敗，為了不卡住传藏，無論是成功還是失敗腻暮，都執(zhí)行操作：將頁面.progress 里的 內(nèi)容替換為 一個 百分比彤守，count+1 是當(dāng)前的圖片預(yù)加載的進(jìn)度，用Math.round 取整后哭靖，再*100具垫，變?yōu)榘俜謹(jǐn)?shù)。接下來做出判斷试幽，如果當(dāng)前的加載進(jìn)度筝蚕，已經(jīng)為 圖片的總長度，就將loading頁隱藏铺坞，并將title的提示改為第一張圖片起宽。如果判斷之后發(fā)現(xiàn)沒有超過，就將加載進(jìn)度加1济榨，繼續(xù)加載下一張圖片咯坯沪。當(dāng)前，我們不是要講每一張圖片對象的src屬性賦值是 數(shù)組里的src 呢擒滑。

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

疑難解答：

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

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

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

組件化開發(fā)：

動力：可以解決當(dāng)前問題，但沒有復(fù)用性袱饭，因此要組件化開發(fā)川无。（我們將插件寫在局部作用域中，使他們與外界互不干涉虑乖，互不影響懦趋；但JS沒有局部作用域的說法，我們用 閉包 來模仿疹味。）

(function(){……})()?? 在它里面定義的變量都是局部的仅叫，就不會和外面的變量沖突了帜篇。外面的括號里傳遞Jquery對象，里面的括號用 $ 符號來接收诫咱，這樣我們就可以在里面使用jQuery對象了笙隙。

面向?qū)ο蟮姆椒▉硗瓿梢粋€插件時，首先就是對象的構(gòu)造函數(shù)坎缭。

組件化：

構(gòu)造方法

默認(rèn)方法

面向?qū)ο笤途固担攸c(diǎn)來咯：

執(zhí)行咯

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

可以使用了

如何使用呢边臼？

可以使用了

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

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

jQuery.fn.extend = jQuery.prototype.extend

留下小作業(yè)：

組件的封裝柠并，自己要來補(bǔ)一補(bǔ)~