原生javaScript實現圖片延時加載的方法

作者：Eve Cole 更新時間：2025-05-07 17:32:01

本文實例講述了原生javaScript實現圖片延時加載的方法。圖片延時加載其實是有jquery插件了並且加載方法非常的簡單並且合理了，但有朋友覺得加載jquery插件包太大了，於時自己寫了一個，給各位分享一下。

首先，圖片延時加載可以節省我們帶寬，獲取到更好的用戶體驗，尤其對於圖片多的站點，這一點顯得至關重要，下面就跟大家探討一下圖片延時加載原理和實現代碼。

圖片延時加載原理

圖片延時加載原理是在html裡面的圖片src填的並不是真正的圖片地址，而是以一種自定義屬性把圖片地址賦給img標籤，如：src=”img/loading.gif” data-url=”img/1.jpg”，然後通過js判斷瀏覽器滾動條事件，達到某處的時候把自定義屬性裡面的圖片真實地址賦給當前img標籤的src，從而實現圖片動態的顯示。在真正的項目中，這些圖片的地址可以通過ajax傳遞過來，賦給img的自定義屬性。

原生JS實現圖片延時加載實例：

文字內容看起來終究有些枯燥，我寫了一個簡單的demo，現在把全部代碼貼出來，需要的朋友可以直接複製過去，看一下代碼就明白了。

複製代碼代碼如下:<!DOCTYPE HTML>

<html>

<head>

<title>圖片延遲加載</title>

<style>

img{display:block;width:350px;height:245px;background:url(img/loading.gif) center center no-repeat}

</style>

</head>

<body>

</div>

var obj=document.getElementById("div").getElementsByTagName("img"),

h=window.innerHeight || document.documentElement.clientHeight;

for(var i=0;i<obj.length;i++){

obj[i].url=obj[i].getAttribute("data-url");

obj[i].top=obj[i].offsetTop;

obj[i].flag=true; //防止瀏覽器一直加載圖片，這樣圖片加載成功後，滾動瀏覽器的時候就不會再加載圖片了；

}

var fnLoad = function(obj){

var t = document.body.scrollTop || document.documentElement.scrollTop;

if(t+h>obj.top+200&&obj.top>t){ //給個200為了提高讓用戶看到圖片加載狀態，更加友好

setTimeout(function(){

obj.src=obj.url;

obj.flag=false;

},500)

}

window.onscroll = window.onload=function(){

for(var i=0;i<obj.length;i++){

if(obj[i].flag){

fnLoad(obj[i]);

}

</script>

</body>

</html>

希望本文所述對大家的javascript程序設計有所幫助。