Javascript之圖片的延遲加載的實(shí)例詳解
Javascript之圖片的延遲加載的實(shí)例詳解
作用:保證頁(yè)面打開的速度(3s之內(nèi)打不開頁(yè)面,就已經(jīng)算是死亡頁(yè)面了)
原理:
1)對(duì)于首屏內(nèi)容中的圖片:首先給對(duì)應(yīng)的區(qū)域一張默認(rèn)圖片占著位置(默認(rèn)圖片需要非常小,一般可以維持在5kb以內(nèi)),當(dāng)首屏內(nèi)容都加載完成后(或者也可以給一個(gè)延遲時(shí)間),再開始加載真實(shí)圖片
2)對(duì)于其他屏中的圖片:也是給一張默認(rèn)的圖片占位,當(dāng)滾動(dòng)條滾動(dòng)到對(duì)應(yīng)區(qū)域的時(shí)候,我們?cè)匍_始加載真實(shí)的圖片
擴(kuò)展:數(shù)據(jù)的異步加載:開始只把前兩屏的數(shù)據(jù)加載綁定出來,后面的數(shù)據(jù)不進(jìn)行處理,當(dāng)頁(yè)面滾動(dòng)到對(duì)應(yīng)區(qū)域的時(shí)候,在重新請(qǐng)求數(shù)據(jù),然后綁定渲染數(shù)據(jù)
首先讓img標(biāo)簽中的src為空,讓imgdisplay:none;在外面的div上的背景圖上面綁定一個(gè)背景圖片,然后等頁(yè)面加載完畢之后,在進(jìn)行加載圖片;
使用定時(shí)器或者window.onload事件,然后把獲取到的url地址綁定到元素img標(biāo)簽上的src上;但是,如果獲取的真實(shí)圖片地址是錯(cuò)誤的src地址時(shí),不僅控制臺(tái)會(huì)報(bào)錯(cuò),而且頁(yè)面會(huì)出現(xiàn)碎圖/叉子圖,影響視覺,以下為處理事件
var oImg = new Image; //創(chuàng)建一個(gè)臨時(shí)的img標(biāo)簽 oImg.src = 真實(shí)的img的src地址 oImg.onload=function(){ //-> 當(dāng)圖片能夠正常加載 img.src = this.src; img.syule.disolay = 'block'; oImg = null; //釋放空標(biāo)簽 }
網(wǎng)站性能優(yōu)化:
1、盡量減少向服務(wù)器端請(qǐng)求的次數(shù)"減少HTTP請(qǐng)求"
2、css/js文件進(jìn)行合并
3、ICON圖片進(jìn)行合并->雪碧圖/css script
4、圖片的延遲加載
5、數(shù)據(jù)的異步加載
6、在移動(dòng)端,我國(guó)做的是一個(gè)簡(jiǎn)單的宣傳頁(yè),盡量的把css和js寫成內(nèi)嵌式
以上就是Javascript之圖片的延遲加載的講解,如有疑問請(qǐng)留言或者到本站社區(qū)交流討論,共同進(jìn)步,感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
- 淺談JavaScript 中的延遲加載屬性模式
- 一文讀懂JavaScript 中的延遲加載屬性模式
- JS script腳本中async和defer區(qū)別詳解
- JavaScript無阻塞加載和defer、async詳解
- 關(guān)于Javascript中defer和async的區(qū)別總結(jié)
- JS中script標(biāo)簽defer和async屬性的區(qū)別詳解
- 瀏覽器環(huán)境下JavaScript腳本加載與執(zhí)行探析之defer與async特性
- js的[defer]和[async]屬性
- JavaScript延遲加載之a(chǎn)sync與defer的應(yīng)用
相關(guān)文章
JavaScript實(shí)現(xiàn)左右滾動(dòng)電影畫布
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)左右滾動(dòng)電影畫布,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-02-02JS實(shí)現(xiàn)HTML頁(yè)面中動(dòng)態(tài)顯示當(dāng)前時(shí)間完整示例
這篇文章主要介紹了JS實(shí)現(xiàn)HTML頁(yè)面中動(dòng)態(tài)顯示當(dāng)前時(shí)間,結(jié)合完整實(shí)例形式分析了JavaScript使用時(shí)間函數(shù)setTimeout及clearTimeout動(dòng)態(tài)顯示當(dāng)前時(shí)間相關(guān)操作技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2018-07-07JavaScript中的公有、私有、特權(quán)和靜態(tài)成員用法分析
這篇文章主要介紹了JavaScript中的公有、私有、特權(quán)和靜態(tài)成員用法,以實(shí)例形式分析了其使用方法,簡(jiǎn)單易懂,對(duì)于初學(xué)javascript的朋友具有不錯(cuò)的學(xué)習(xí)與借鑒價(jià)值,需要的朋友可以參考下2014-11-11為JavaScript提供睡眠功能(sleep) 自編譯JS引擎
如何在js中讓函數(shù)睡眠多少秒? 經(jīng)常會(huì)有Javascript初學(xué)者提出這樣的問題,自從js出現(xiàn)以來.2010-08-08快速解決js中window.location.href不工作的問題
下面小編就為大家?guī)硪黄焖俳鉀Qjs中window.location.href不工作的問題。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11js實(shí)現(xiàn)鼠標(biāo)滑動(dòng)到某個(gè)div禁止?jié)L動(dòng)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)鼠標(biāo)滑動(dòng)到某個(gè)div禁止?jié)L動(dòng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09JavaScript中實(shí)現(xiàn)PHP的打亂數(shù)組函數(shù)shuffle實(shí)例
這篇文章主要介紹了JavaScript中實(shí)現(xiàn)PHP的打亂數(shù)組函數(shù)shuffle實(shí)例,本文用2種方法實(shí)現(xiàn)了類似PHP的打亂數(shù)組函數(shù)shuffle函數(shù),需要的朋友可以參考下2014-10-10用js實(shí)現(xiàn)控件的隱藏及style.visibility的使用
用js控制控件的隱藏,使用style.visibility實(shí)現(xiàn) ,具體代碼如下,感興趣的朋友可以參考下哈,希望對(duì)大家有所幫助2013-06-06使用contextMenu插件實(shí)現(xiàn)Bootstrap table彈出右鍵菜單
如今Bootstrap這個(gè)前端框架已被許多人接受并應(yīng)用在不同的項(xiàng)目中,其中“開發(fā)高效,設(shè)備兼容”的特點(diǎn)表現(xiàn)得非常明顯。這篇文章主要介紹了使用contextMenu插件實(shí)現(xiàn)Bootstrap table彈出右鍵菜單,需要的朋友可以參考下2017-02-02