一個簡單的圖片懶加載

RaoMeng 發(fā)布于2019-08-02 16:05 / 2715人閱讀

摘要：一個簡單的圖片懶加載所謂懶加載，是為了提高網頁的打開的速度，獲得更好用戶體驗的一種手段。本文僅僅簡單的舉例圖片的懶加載，是性能優(yōu)化的入門的篇章，方法比較簡單明了，只要有一點基礎就一定能看懂。

一個簡單的圖片懶加載

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

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

廢話不多說

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

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

//首先你需要引入一個 jQuery 庫

//獲取需要延遲加載的圖片
var $picDelay = $(".img-delay");

//在 window 上監(jiān)聽滑動事件
$(window).scroll(function(){
  var scrollTop = $(window).scrollTop();    //滑塊劃過的距離
  var screenHeight = screen.height;     //屏幕瀏覽器內容部分的高度

  //計算每個圖片的位置是否符合要求
  $picDelay.each(function(idx, ele){
    var $ele = $(ele);
    //當scrollTop + screenHeight === ele.offsetTop時圖片剛好出現(xiàn)上邊沿
    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");
  }
});

GPU云服務器云服務器 js實現(xiàn)數(shù)據的懶加載圖片 js圖片懶加載懶加載懶加載異常

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/54630.html

手摸手-100行代碼自己動手寫個功能完整的圖片懶加載插件

摘要：景科同學的想法很簡單，因為本人目前還是一個前端小白，只有通過不斷的寫，不斷的學，在與的相愛相殺中才能更快速的進步。本項目是景科同學自寫自測，雖然比較簡單，但是不保證沒有隱藏的。所以如果看官同學發(fā)現(xiàn)還望留言指正，景科同學在此以示感謝。 showImg(https://segmentfault.com/img/remote/1460000014251310?w=841&h=630); 本文...

CompileYouth 2019-08-22 16:07 評論0 收藏0
一個簡單的圖片懶加載

摘要：一個簡單的圖片懶加載所謂懶加載，是為了提高網頁的打開的速度，獲得更好用戶體驗的一種手段。本文僅僅簡單的舉例圖片的懶加載，是性能優(yōu)化的入門的篇章，方法比較簡單明了，只要有一點基礎就一定能看懂。一個簡單的圖片懶加載所謂懶加載，是為了提高網頁的打開的速度，獲得更好用戶體驗的一種手段。其選擇的重要的部分先加載，次要的部分需要的時候再加載。比如一個電商網站，首屏通常有很多的數(shù)據，清晰度較高的...

ephererid 2019-08-23 11:53 評論0 收藏0
原生JS實現(xiàn)最簡單的圖片懶加載

摘要：原文地址原生實現(xiàn)最簡單的圖片懶加載歡迎。什么時候用懶加載當頁面中需要一次性載入很多圖片的時候，往往都是需要用懶加載的。屬性是一個必需的屬性，它規(guī)定在圖像無法顯示時的替代文本。假設來表示圖片到可視區(qū)域頂部距離并設來表示可視區(qū)域的高度。原文地址：原生JS實現(xiàn)最簡單的圖片懶加載歡迎star。如果有錯誤的地方歡迎指正。 Demo地址：http://axuebin.com/lazyloa...

villainhr 2019-08-21 12:01 評論0 收藏0
原生 JS 實現(xiàn)最簡單的圖片懶加載

摘要：什么時候用懶加載當頁面中需要一次性載入很多圖片的時候，往往都是需要用懶加載的。屬性是一個必需的屬性，它規(guī)定在圖像無法顯示時的替代文本。假設來表示圖片到可視區(qū)域頂部距離并設來表示可視區(qū)域的高度。懶加載什么是懶加載懶加載其實就是延遲加載，是一種對網頁性能優(yōu)化的方式，比如當訪問一個頁面的時候，優(yōu)先顯示可視區(qū)域的圖片而不一次性加載所有圖片，當需要顯示的時候再發(fā)送圖片請求，避免打開網頁時加載過...

Miracle 2019-08-23 16:59 評論0 收藏0