如何一个接一个地加载图像？

我有一个有很多图像的网站。我想要将一些图像加载到另一个图像之前（因为用户将滚动到最后的图像）。比方说，这是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

如何一个接一个地加载图像？

回答

相关问题