優(yōu)化輪播廣告的加載方式，大大減少了頁面的加載量

首先，將圖片的路徑存儲在img標(biāo)簽的一個(gè)非src屬性中，LOL首頁是存儲在rel屬性中的，此舉是避免頁面直接加載圖片。優(yōu)化輪播廣告的加載方式，然后使用JS的監(jiān)聽方法（IE是attachEvent，其他瀏覽器是addEventListener），監(jiān)聽頁面的scroll事件。一旦頁面滾動，就會執(zhí)行一個(gè)編寫的函數(shù)，來判斷圖片是否處于瀏覽器的當(dāng)前一屏內(nèi)，如果是，將rel屬性內(nèi)的地址賦值給src屬性，如果不是，繼續(xù)監(jiān)聽。當(dāng)板塊內(nèi)的所有圖片都被加載后，取消監(jiān)聽。LOL官網(wǎng)首頁的活動板塊和媒體合作板塊均使用了這種技術(shù)，大大減少了頁面的加載量。

簡單的說，本地存儲就是為網(wǎng)頁通過客戶端網(wǎng)頁瀏覽器在本地存儲鍵值對的一個(gè)方法。就像Cookie，就算你離開了網(wǎng)站，關(guān)閉了瀏覽器標(biāo)簽，退出瀏覽器等等，數(shù)據(jù)也會一直存在。與Cookie不同的是，數(shù)據(jù)絕不會向遙遠(yuǎn)的網(wǎng)絡(luò)服務(wù)器傳送（除非你使用其他方法來手動傳輸）。不同于提供長期本地存儲的上述所有嘗試，它在網(wǎng)頁瀏覽器內(nèi)以原生的方式執(zhí)行，因此在第三方瀏覽器插件失效的情況下它也能有效執(zhí)行。

我們對于支持HTML5的瀏覽器(Firefox、Chrome、Safari、Opera等)，使用HTML5的localStorage提供的方法；對于IE瀏覽器，使用IE提供的userData方法；對于其他瀏覽器使用常規(guī)方法加載內(nèi)容。

userData是IE提供的一個(gè)本地存儲方法，他將需要存儲的內(nèi)容放置在本地的一個(gè)XML文件中，并在頁面的一個(gè)元素中設(shè)置一個(gè)調(diào)用的錨點(diǎn)。具體使用方法為：使用getElementById獲取頁面內(nèi)的一個(gè)元素，使用addBehavior(“#default#userData”)對其添加本地存儲的行為；使用setAttribute將需要存儲的內(nèi)容對其進(jìn)行賦值，并用save(“XXX”)方法將內(nèi)容存儲在名為XXX的XML文件中；使用load(“XXX”)方法加載本地的XXX.xml文件，并用getAttribute獲取已經(jīng)存儲的內(nèi)容。

其實(shí)這是很多大型網(wǎng)站都使用了的方法，比如淘寶、拍拍等等。這次在游戲官網(wǎng)里做一個(gè)嘗試，效果不錯，初期為首頁節(jié)省了幾十K的下載量，因?yàn)椴煌@示器分辨率不同，所以第一屏高度不一樣，這個(gè)數(shù)據(jù)有所浮動。

文章題目：優(yōu)化輪播廣告的加載方式，大大減少了頁面的加載量
轉(zhuǎn)載源于：http://bm7419.com/news/169027.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、關(guān)鍵詞優(yōu)化、品牌網(wǎng)站設(shè)計(jì)、移動網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站改版

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)