摘要:一個簡單的圖片懶加載所謂懶加載,是為了提高網頁的打開的速度,獲得更好用戶體驗的一種手段。本文僅僅簡單的舉例圖片的懶加載,是性能優化的入門的篇章,方法比較簡單明了,只要有一點基礎就一定能看懂。
一個簡單的圖片懶加載
所謂懶加載,是為了提高網頁的打開的速度,獲得更好用戶體驗的一種手段。其選擇的重要的部分先加載,次要的部分需要的時候再加載。比如一個電商網站,首屏通常有很多的數據,清晰度較高的 banner 或輪播。頁面非首屏部分會員很多商品夾雜著大量的圖片。這是時候選擇懶加載以保證首屏的流暢十分重要。
本文僅僅簡單的舉例圖片的懶加載,是性能優化的入門的篇章,方法比較簡單明了,只要有一點 js 基礎就一定能看懂。
廢話不多說
首先,對于非首屏的圖片添加了 class="img-delay" 和 data-src屬性,后者用來放置圖片原始 url 地址的屬性,對于圖片本身的 src 屬性,可以選擇空著,或者添加一個”圖片無法顯示“的提示性圖片,像天貓這樣:
之后我們需要做的就是,當用戶下滑到哪里就顯示哪里的圖片(提前一點點顯示更好,這里不做提前了)
//首先你需要引入一個 jQuery 庫 //獲取需要延遲加載的圖片 var $picDelay = $(".img-delay"); //在 window 上監聽滑動事件 $(window).scroll(function(){ var scrollTop = $(window).scrollTop(); //滑塊劃過的距離 var screenHeight = screen.height; //屏幕瀏覽器內容部分的高度 //計算每個圖片的位置是否符合要求 $picDelay.each(function(idx, ele){ var $ele = $(ele); //當scrollTop + screenHeight === ele.offsetTop時圖片剛好出現上邊沿 if(scrollTop + screenHeight >= ele.offsetTop){ $ele.attr("src", $ele.attr("data-src")).removeAttr("data-src").removeClass("img-delay"); } }); //當所有圖片都加載了以后,移除這個事件 if($(".img-delay").length <= 0){ $(window).unbind("scroll"); } });
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/97613.html
摘要:景科同學的想法很簡單,因為本人目前還是一個前端小白,只有通過不斷的寫,不斷的學,在與的相愛相殺中才能更快速的進步。本項目是景科同學自寫自測,雖然比較簡單,但是不保證沒有隱藏的。所以如果看官同學發現還望留言指正,景科同學在此以示感謝。 showImg(https://segmentfault.com/img/remote/1460000014251310?w=841&h=630); 本文...
摘要:一個簡單的圖片懶加載所謂懶加載,是為了提高網頁的打開的速度,獲得更好用戶體驗的一種手段。本文僅僅簡單的舉例圖片的懶加載,是性能優化的入門的篇章,方法比較簡單明了,只要有一點基礎就一定能看懂。 一個簡單的圖片懶加載 所謂懶加載,是為了提高網頁的打開的速度,獲得更好用戶體驗的一種手段。其選擇的重要的部分先加載,次要的部分需要的時候再加載。比如一個電商網站,首屏通常有很多的數據,清晰度較高的...
摘要:原文地址原生實現最簡單的圖片懶加載歡迎。什么時候用懶加載當頁面中需要一次性載入很多圖片的時候,往往都是需要用懶加載的。屬性是一個必需的屬性,它規定在圖像無法顯示時的替代文本。假設來表示圖片到可視區域頂部距離并設來表示可視區域的高度。 原文地址:原生JS實現最簡單的圖片懶加載 歡迎star。 如果有錯誤的地方歡迎指正。 Demo地址:http://axuebin.com/lazyloa...
摘要:什么時候用懶加載當頁面中需要一次性載入很多圖片的時候,往往都是需要用懶加載的。屬性是一個必需的屬性,它規定在圖像無法顯示時的替代文本。假設來表示圖片到可視區域頂部距離并設來表示可視區域的高度。 懶加載什么是懶加載懶加載其實就是延遲加載,是一種對網頁性能優化的方式,比如當訪問一個頁面的時候,優先顯示可視區域的圖片而不一次性加載所有圖片,當需要顯示的時候再發送圖片請求,避免打開網頁時加載過...
閱讀 3684·2021-11-25 09:43
閱讀 2600·2021-11-18 13:11
閱讀 2195·2019-08-30 15:55
閱讀 3272·2019-08-26 11:58
閱讀 2823·2019-08-26 10:47
閱讀 2230·2019-08-26 10:20
閱讀 1271·2019-08-23 17:59
閱讀 2999·2019-08-23 15:54