0

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

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

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

2) 将所有图像放在一个带有 display:none 的 div 中。我相信一些浏览器仍然会在加载时加载这些图像，所以可能不是一个好主意

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

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

提前致谢！

4

2 回答 2

3

第一个很好。只是让 src 指向无处src=""或单个占位符图像。如果需要图片文件，切换src为真实路径，浏览器加载。再次切换以进行删除，那么文件对于垃圾收集器来说是公平的游戏。
第二个将只是隐藏但仍会加载图像。三号基本上做一号的工作。（第一次发帖，没有名气，还是希望能帮上忙）。

于 2013-08-01T14:58:55.933 回答
0

我使用以下技术：

// 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-01T15:03:43.083 回答