如何接連加載圖像？

Question

我有一個網站，里面有很多圖片。 我想先加載一些圖像（因為用戶將滾動到最后一張圖像）。 假設這是html：

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

加載img1.jpg和img2.jpg之后，如何使img3.jpg和img4.jpg開始加載？

Answer 1

我完全同意Steve Testa的回答-Mike Tupola的jQuery插件是所謂“延遲加載”的最好的插件之一-但是，我最近偶然發現了該插件的一項重大改進。 正如史蒂夫所說，邁克·圖波拉（Mike Tupola）的插件僅適用於圖片； 幸運的是，此插件名為LazyLoadAny-允許您延遲加載幾乎所有所需的內容： https : //github.com/emn178/jquery-lazyload-any

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

Answer 2

我希望有一個更輕量級的插件，它可以加載圖像而無需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像素。

Answer 3

快速的google搜索（ 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')">

...等等等等。

Answer 4

您可能需要使用javascript強制執行延遲加載方案。 我個人是Mike Tupola的jquery插件的忠實粉絲。 僅在可見的情況下加載圖像。 這樣，如果用戶從不向下滾動任何不可見的圖像，則永遠不會加載。