Javascript之圖片的延遲加載的實例詳解
Javascript之圖片的延遲加載的實例詳解
作用：保證頁面打開的速度(3s之內(nèi)打不開頁面，就已經(jīng)算是死亡頁面了)
原理：
1）對于首屏內(nèi)容中的圖片：首先給對應的區(qū)域一張默認圖片占著位置(默認圖片需要非常小，一般可以維持在5kb以內(nèi))，當首屏內(nèi)容都加載完成后(或者也可以給一個延遲時間)，再開始加載真實圖片
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寫成內(nèi)嵌式
以上就是Javascript之圖片的延遲加載的講解，如有疑問請留言或者到本站社區(qū)交流討論，共同進步，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關文章
JS將所有對象s的屬性復制給對象r(原生js+jquery)
這篇文章主要介紹了js中將所有對象s的屬性復制給對象r的方法，原生js+jquery分別實現(xiàn)2014-01-01
這篇文章主要給大家介紹了7道關于JS this的面試題，來看看你能答對幾個，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-03-03
js 關于=+與+=日期函數(shù)使用說明(賦值運算符)
js 關于=+與+=日期函數(shù)使用說明(賦值運算符)，可以看下，就是一些運算符的使用，看哪個更適合你。2011-11-11
Javascript實現(xiàn)仿QQ隨機數(shù)驗證
這篇文章主要為大家詳細介紹了Javascript實現(xiàn)仿QQ隨機數(shù)驗證，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-05-05
這篇文章主要介紹了webpack4.x CommonJS模塊化淺析,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)左右列表聯(lián)動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-02-02
在qq空間，新浪微博，人人網(wǎng)等網(wǎng)絡平臺大家經(jīng)?？梢钥吹揭绘I分享功能，那么基于js代碼是如何實現(xiàn)一鍵分享的呢？下面腳本之家小編給大家介紹js實現(xiàn)一鍵分享功能的代碼，需要的朋友參考下吧2016-04-04
這篇文章主要介紹了JS面向?qū)ο蟮某绦蛟O計,現(xiàn)在很多代碼都是基于面向?qū)ο髮崿F(xiàn),需要的朋友可以參考下2018-05-05
本篇文章給大家總結了js保留兩位小數(shù)的各種方法以及每種方法的實例代碼分析，如果大家對此有需要，一起來學習下js保留兩位小數(shù)的方法吧。2018-01-01
這篇文章主要幫助大家深入理解javascript模塊化，感興趣的小伙伴們可以參考一下2016-03-03