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ū)交流討論，共同進步，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
相關文章
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)左右滾動電影畫布，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
JS實現(xiàn)HTML頁面中動態(tài)顯示當前時間完整示例
這篇文章主要介紹了JS實現(xiàn)HTML頁面中動態(tài)顯示當前時間,結(jié)合完整實例形式分析了JavaScript使用時間函數(shù)setTimeout及clearTimeout動態(tài)顯示當前時間相關操作技巧,非常簡單實用,需要的朋友可以參考下2018-07-07
JavaScript中的公有、私有、特權和靜態(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-11
這篇文章主要介紹了JavaScript常用腳本匯總系列的第一篇，給大家分享的是jquery限制文本框只能輸入數(shù)字、封裝DOMContentLoaded事件、用原生JS對AJAX做簡單封裝、跨域請求之JSONP、千分位格式化，有需要的小伙伴們參考下吧。2015-03-03
這篇文章主要為大家詳細介紹了js實現(xiàn)鼠標滑動到某個div禁止?jié)L動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
JavaScript中實現(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