如何一個接一個地加載圖像？

我有一個有很多圖像的網站。我想要將一些圖像加載到另一個圖像之前（因爲用戶將滾動到最後的圖像）。比方說，這是HTML：如何一個接一個地加載圖像？

<img src='img1.jpg'> 
<img src='img2.jpg'> 
<img src='img3.jpg'> 
<img src='img4.jpg'>

怎樣才能讓img3.jpg和img4.jpg開始img1.jpg和img2.jpg加載之後加載？

來源

2015-09-25 asiniy

我完全同意Steve Testa的回答 - Mike Tupola的jQuery插件是所謂的「懶加載」最好的之一 - 但是，最近我偶然發現了一個插件的重大改進。正如Steve提到的，Mike Tupola的插件只適用於圖像;幸運的是，這個插件被稱爲LazyLoadAny - 它允許你懶惰地加載任何你想要的東西：https://github.com/emn178/jquery-lazyload-any

我最近在產品列表頁面上使用這個客戶端沒有分頁，但不希望它們全部加載立即 - 它是一個很好的資源和易於使用。如果您需要進一步解釋，請詢問。

來源

2015-09-25 15:50:47 rockmandew

看起來對我很好。謝謝！ – asiniy

快速谷歌搜索（http://www.cryer.co.uk/resources/javascript/script3.htm，頁都有例子）提供了一個函數來加載另一個圖像上一個影像加載完成後：

<script type="text/javascript"> 
var loadingImage = false; 

function LoadImage(imageName,imageFile) 
{ 
    if ((!document.images) || loadingImage) return; 
    loadingImage = true; 

    if (document.images[imageName].src.indexOf(imageFile)<0) 
    { 
    document.images[imageName].src = imageFile; 
    } 
    loadingImage = false; 
} 
LoadImage('image0','number0.gif'); 
</script>

然後用像

<img name="image0" onLoad="LoadImage('image1','number1.gif')"> 
<img name="image1" onLoad="LoadImage('image2','number2.gif')">

...和等等等等。

來源

2015-09-25 15:39:03

您可能需要用JavaScript強制延遲加載場景。我個人很喜歡Mike Tupola's jquery plugin。它只會在圖像可見時加載圖像。這樣，如果用戶從不向下滾動任何不可見的圖像將永不加載。

來源

2015-09-25 15:41:23

我寧願更加輕量級的插件加載圖像沒有overhead of jQuery。

的justlazy庫提供圖像的自動延遲加載：

1.定義您的佔位符：

<span data-src="img1" data-alt="some alt text 1" 
 
     class="justlazy-placeholder"> 
 
</span> 
 

 
<span data-src="img2" data-alt="some alt text 2" 
 
     class="justlazy-placeholder"> 
 
</span>

2.通過JavaScript初始化延遲加載：

當他們得到了用戶可見

Justlazy.registerLazyLoadByClass("justlazy-placeholder");

該插件將加載圖像。如果他們應該早點加載，你可以提供一個門檻：

Justlazy.registerLazyLoadByClass("justlazy-placeholder", { 
 
    threshold: 200 
 
});

現在它得到在視口中可見之前的特定圖像將被加載200個像素。

來源

2015-09-27 15:19:50

如何一個接一個地加載圖像？

回答

相關問題