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