javascript - 在网页中高效加载隐藏/分层图像

Question

我有一个分层的 div 组件，它通过滑动动画移走顶部图像以显示下面的下一个图像来显示一系列连续的大 kb 图像。我正在尝试了解如何最好地解决这个问题。

方法 1:

将多个 div 叠加在一起，每个 div 都指定一个图像作为背景，然后根据需要滑开 div。

隐藏的 div 会在页面加载时加载其图像，还是仅在显示时加载图像？这是浏览器/客户端特定的行为吗？所有图像(jpeg、png)在这方面的行为方式都相同吗？

方法 2:

仅使用两个 div - 一个用于处理滑动，另一个用于加载并显示下一张图像。

在这种情况下，是否可以预加载下一个图像，以便在显示下一个图像时 JavaScript 不会变慢？

谢谢 - 如果有人有其他想法，我很乐意听听。

Answer 1

即使图像通过 CSS“隐藏”，您的第一种方法也会通过 HTTP 请求加载所有浏览器的所有图像。您的第二种方法或其某些变体可能更好。

我建议您使用 AJAX 来下拉每个图像。预加载图像绝对是可能的。

您可能需要考虑 jquery 或 javascript 的现有幻灯片/灯箱类型插件。它已经被做过很多次了，你会有点重新创造轮子(除非它更多的是一种学习体验)..

这是一个有趣的预加载示例，使用回调在准备就绪时提醒您。也许是一个很好的适应方式？

http://binarykitten.me.uk/dev/jq-plugins/107-jquery-image-preloader-plus-callbacks.html