Question

我正在构建一个非常重要的Web应用程序。它的一个特征是交互式时间轴，允许用户滚动一系列年份。每年都有一个20-50张图片的照片库。我正在寻找在加载时隐藏图像的最佳解决方案，并根据需要加载它们（点击事件）。以下是一些选项：

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

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

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

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

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

提前致谢！

Answer 1

第一是好的。只是让src指向无处src=""或单个占位符图像。如果需要图像文件，请使用实际路径切换src，然后浏览器加载它。再次切换以进行移除，然后该文件对于gargabe收集器来说是公平的游戏第二个将隐藏但仍然加载图像。第三个基本上做第一个做的事。（第一篇文章，没有声望，仍希望我能帮忙）。

Answer 2

我使用以下技术：

// 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中。

适用于图像简单“延迟加载”的方法

2 个答案: