公司網(wǎng)站制作懶加載技術(shù)
日期 : 2021-03-21 12:48:48
懶加載技術(shù)。絕大多數(shù)的電商網(wǎng)站, 都用長頁面去展示商品信息, 通常需要滾動很久, 展示很多信息, 才會到達網(wǎng)頁底部, 或者一直沒有到底部。電商網(wǎng)站采用長頁面這一做法, 目的是為了讓用戶更輕易地獲得海量信息, 只需要滾動滾輪, 不需要點擊頁碼分頁瀏覽。但這一做法, 會增加網(wǎng)頁的臃腫度, 因為一個頁面內(nèi)容太多, 需要加載的圖片數(shù)量必然會增多。一打開頁面就發(fā)送上百的圖片請求, 服務(wù)器的壓力十分大。
懶加載技術(shù)就非常適用于頁面很長的業(yè)務(wù)場景。懶加載的思路非常簡單, 打開頁面的時候, 優(yōu)先加載網(wǎng)頁第一屏 (用戶首先看到的屏幕內(nèi)容) 中的內(nèi)容。待用戶往下滾動的時候, 再按需加載相關(guān)資源。懶加載技術(shù)主要通過JavaScript腳本去實現(xiàn)。其主要實現(xiàn)思路是, 在每個HTML中的每個IMG標簽, 定義一個data-src屬性存放圖片地址, 并將原來應(yīng)該放圖片地址的SRC屬性指向loading的圖片。在頁面初步加載的時候, 先通過JavaScript獲得到整個頁面中所有包含data-src屬性的圖片元素, 將其加入到一個緩存數(shù)組, 然后監(jiān)聽滾動事件, 當滾動事件被觸發(fā)的時候, 遍歷緩存數(shù)組的每一個元素, 并判斷該元素是否出現(xiàn)在視窗中, 如果出現(xiàn)在視窗中, 即可將SRC屬性的值替換成data-src的值, 從而達到加載圖片的目的。
懶加載技術(shù)可以為網(wǎng)站節(jié)約大量不必要的圖片加載數(shù)量, 使得首次加載的資源大大減少, 讓網(wǎng)站運行得更流暢。
懶加載技術(shù)就非常適用于頁面很長的業(yè)務(wù)場景。懶加載的思路非常簡單, 打開頁面的時候, 優(yōu)先加載網(wǎng)頁第一屏 (用戶首先看到的屏幕內(nèi)容) 中的內(nèi)容。待用戶往下滾動的時候, 再按需加載相關(guān)資源。懶加載技術(shù)主要通過JavaScript腳本去實現(xiàn)。其主要實現(xiàn)思路是, 在每個HTML中的每個IMG標簽, 定義一個data-src屬性存放圖片地址, 并將原來應(yīng)該放圖片地址的SRC屬性指向loading的圖片。在頁面初步加載的時候, 先通過JavaScript獲得到整個頁面中所有包含data-src屬性的圖片元素, 將其加入到一個緩存數(shù)組, 然后監(jiān)聽滾動事件, 當滾動事件被觸發(fā)的時候, 遍歷緩存數(shù)組的每一個元素, 并判斷該元素是否出現(xiàn)在視窗中, 如果出現(xiàn)在視窗中, 即可將SRC屬性的值替換成data-src的值, 從而達到加載圖片的目的。
懶加載技術(shù)可以為網(wǎng)站節(jié)約大量不必要的圖片加載數(shù)量, 使得首次加載的資源大大減少, 讓網(wǎng)站運行得更流暢。
相關(guān)文章
精彩導讀
熱門資訊
