一、什么是圖片懶加載？

當訪問一個頁面的時候，先把img元素或是其他元素的背景圖片路徑替換成一張大小為1*1px圖片的路徑(這樣就只需請求一次)，當圖片出現在瀏覽器的可視區域內時，才設置圖片真正的路徑，讓圖片顯示出來。這就是圖片懶加載。

通俗一點：

1、就是創建一個自定義屬性data-src存放真正需要顯示的圖片路徑，而img自帶的src放一張大小為1 * 1px的圖片路徑。

2、當頁面滾動直至此圖片出現在可視區域時，用js取到該圖片的data-src的值賦給src。

ps：自定義屬性可以取任何名字

二、需要了解的問題

1、如何加載圖片？

2、如何判斷一個元素出現在視野中？

如何加載圖片？

只需要把data-src中的地址放到src的里面就好了。

代碼：

function loadImg($img){

//.attr(值)

//.attr(屬性名稱,值)

$img.attr('src', $img.attr('data-src')) //把data-src的值 賦值給src

$img.attr('data-isLoaded', 1) //已加載過的圖片做標記

}

廢話少說，直接上demo:

Document

.container {

max-width: 900px;

margin: 0 auto;

display: block;

}

.container:after {

content: '';

display: block;

clear: both;

}

h1 {

clear: both;

}

你好

start();

$(window).on('scroll', function() {

start();

})

function start() {

//.not('[data-isLoaded]')選中已加載的圖片不需要重新加載

$('.container img').not('[data-isLoaded]').each(function() {

var $node = $(this);

if (isShow($node)) {

loadImg($node);

}

})

}

//判斷一個元素是不是出現在窗口(視野)

function isShow($node) {

return $node.offset().top <= $(window).height() + $(window).scrollTop();

}

//加載圖片

function loadImg($img) {

//.attr(值)

//.attr(屬性名稱,值)

$img.attr('src', $img.attr('data-src')); //把data-src的值 賦值給src

$img.attr('data-isLoaded', 1); //已加載的圖片做標記

}

說明一下：

當我們打這個demo的時候，看到的是第一張圖片，這個在打開第一張圖片的時候，利用開發者工具我們可以看到如下截圖：

;

這個就說明當視口顯示第一張圖片的時候，第二張和第三張還沒出現，那么就保持loading.gif，這樣就節省了加載的時間，當我們繼續往下滑直到出現第二張圖片的時候，此時第三張圖片還沒出現在視口，我們通過開發者工具看到如下的截圖：

當然，我們繼續滑動到下面，看到第三張圖片的時候，自然而然第三張的loading.gif也會被g3.jpg取代，這樣就實現了懶加載，滑動到那個位置才加載，這篇文章參考了這個作者：https://www.cnblogs.com/moxiaowohuwei/p/7908877.html

創建時間：2018年9月7日0:27

總結

以上是生活随笔為你收集整理的html data-src和src的区别,img 的data-src 属性实现懒加载的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。