91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

html中圖片懶加載的實現方法

發布時間:2020-10-22 15:56:54 來源:億速云 閱讀:566 作者:小新 欄目:web開發

html中圖片懶加載的實現方法?這個問題可能是我們日常學習或工作經常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家帶來的參考內容,讓我們一起來看看吧!

所謂懶加載,是為了提高網頁的打開的速度,獲得更好用戶體驗的一種手段。其選擇的重要的部分先加載,次要的部分需要的時候再加載。比如一個電商網站,首屏通常有很多的數據,清晰度較高的 banner 或輪播。頁面非首屏部分會員很多商品夾雜著大量的圖片。這是時候選擇懶加載以保證首屏的流暢十分重要。

本文僅僅簡單的舉例圖片的懶加載,是性能優化的入門的篇章,方法比較簡單明了,只要有一點 js 基礎就一定能看懂。

廢話不多說

<img src="img/pic_error.jpg" class="img-delay" src="img/banner.png" />

首先,對于非首屏的圖片添加了 class="img-delay" 和 src屬性,后者用來放置圖片原始 url 地址的屬性,對于圖片本身的 src 屬性,可以選擇空著,或者添加一個”圖片無法顯示“的提示性圖片,像天貓這樣:

html中圖片懶加載的實現方法

之后我們需要做的就是,當用戶下滑到哪里就顯示哪里的圖片(提前一點點顯示更好,這里不做提前了)

//首先你需要引入一個 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("src")).removeAttr('src').removeClass("img-delay");
    }
  });

  //當所有圖片都加載了以后,移除這個事件
  if($(".img-delay").length <= 0){
    $(window).unbind("scroll");
  }
});

感謝各位的閱讀!看完上述內容,你們對html中圖片懶加載的實現方法大概了解了嗎?希望文章內容對大家有所幫助。如果想了解更多相關文章內容,歡迎關注億速云行業資訊頻道。

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

抚顺市| 故城县| 黄山市| 越西县| 雅江县| 山西省| 鸡泽县| 富平县| 化德县| 遂溪县| 安远县| 黄大仙区| 淮滨县| 甘谷县| 修水县| 汨罗市| 乌兰察布市| 东港市| 海安县| 郑州市| 陆良县| 隆林| 嘉义市| 日土县| 织金县| 宜宾市| 蒙自县| 竹溪县| 稷山县| 裕民县| 内乡县| 瑞金市| 洛川县| 永春县| 车致| 竹山县| 临城县| 雷州市| 寻甸| 武义县| 刚察县|