简单的'延迟加载'图像的正确方法

我正在构建一个非常重的图像应用程序。它的一个特点是交互式时间轴，它允许用户滚动浏览一系列的年份。每年有一个20-50图像的照片库。我正在寻找最佳的解决方案来在加载时隐藏图像，并按需加载它们（点击事件）。这里有几个选项：简单的'延迟加载'图像的正确方法

1）使用javascript将data-src分配给需要的实际src。

<img src="blank.png" data-src="images/real-image.jpg">

2）将所有图像放置在div中，并显示：none。我相信有些浏览器仍然加载在加载这些图像，因此可能不是一个好主意

<div style="display:none"> 
    <img src="images/real-image.jpg"> 
</div>

3）使用像lazyload的技术。该插件JAIL允许在事件触发后加载图像。

在此先感谢！

来源

2013-08-01 JCHASE11

那么你已经回答了一些问题......如果你使用了很多图片，那么围绕用户看的图片缓存图片可能是你最好的选择。看看其他图像画廊如何去做。这不是设计问题的正确论坛 –

我使用以下技术：

// Contains Image path strings that can be loaded statically or dynamically 
var imgs = [img1, img2, img3, img4]; 
var img = new Image(); 
img.style.cssText = "position: absolute; visibility: hidden; display: block"; 
document.body.appendChild(img); 

for (var i = 0 ; i < imgs.length ; i++) 
    img.src = imgs[i];

每次迭代的帖子的图像，这将在后面到达时缓存的HTTP请求。
这适用于我。我使用服务器端代将字符串路径加载到HTML中。

来源

2013-08-01 15:03:43 EZSlaver

这很好，谢谢！ – JCHASE11

第一好。只是让src指向任何地方src=""或单个占位符图像。如果您需要图像文件，请使用真实路径切换src，然后浏览器加载它。再次切换删除，然后该文件是Gargabe收藏家公平的游戏。
二号将只是隐藏，但仍然加载图像。第三个基本上做第一个做的事情。（第一篇文章，没有声望，仍然希望我可以帮忙）。

来源

2013-08-01 14:58:55

简单的'延迟加载'图像的正确方法

回答

相关问题