有效地加载在网页中隐藏/分层图像

Question

我具有分层的div组件通过滑动动画远顶端图像一系列连续大kb的图像以显示下面的下一个图像，其显示。我想了解如何最好地处理这个。

<强>方法1：

在彼此中，每个顶层数的div与被指定为背景的图像，并且根据需要滑走的div。

请问隐藏层在页面加载加载自己的图像，或者他们只透露是什么时候？这是浏览器/客户的具体行为？这样做的行为方式相同的所有图像（JPEG文件，PNG图像）在这方面？

<强>方法2：

使用只有两个divs-一说手柄滑动，其他将加载和显示下一个图像。

在这种情况下，是有可能预加载下一个图像，从而使下一个图像显示时的JavaScript不减慢？

Thanks-，如果任何人有其他想法，我很愿意听到他们的声音。

Answer 1

您第一种方法，即使图像是通过CSS“隐藏”，将通过HTTP请求加载所有浏览器的所有图像。你的第二个方法或者它的一些变种可能是更好的。

我推荐使用AJAX，你去拉下来每个图像。这是绝对有可能预载的图片。

您可能要考虑的插件的jQuery或JavaScript的现有幻灯片/收藏型。它已经这样做了很多次，你会排序来重新创建轮（除非它是更多的是学习经验的东西）..

下面是与回调预装提醒您，当它准备的一个有趣的例子。也许一个很好的适应？

HTTP：// binarykitten .me.uk的/ dev / JQ-插件/ 107-jQuery的图像预加载加callbacks.html

Answer 2

第一种方法当然更好降解。这将离开图像可用，可见如果在CSS-质疑浏览器中查看。但是，正值其拉下所有从一开始就对图像的成本。第二种方法是在初始命中更轻，在成本增加代码的复杂性输入/输出交换图像。

您绝对可以预先加载图片的JavaScript。只是创建一个图像对象，其源设置为任何你想要的，形象的，可以自动触发下载。它不具有要被插入到所述DOM或对用户可见做到这一点。

隐藏层的应该的自动加载它们的内容，不管他们是可见或不可见。我想不出任何基于PC的浏览器，将无法做到这一点，但我大胆猜测，有些浏览器适用于资源有限的设备（手机一）可能会优化的东西，延迟加载内容，直到容器的可见，以节省网络流量。