我有一个分层的div组件，它通过幻灯片动画显示一系列连续的大型kb图像，以显示下面的下一张图像。我正在努力了解如何最好地解决这个问题。
方法1：
将多个div叠加在一起，每个div都有一个指定为背景的图像，并根据需要滑动div。
隐藏的div会在页面加载时加载图像，还是只在它们被显示时加载？这是针对浏览器/客户端的行为吗？在这方面，所有图像（jpegs，pngs）的行为方式是否相同？
方法2：
仅使用两个div-一个处理滑动，另一个将加载并显示下一个图像。
在这种情况下，是否可以预加载下一张图像，以便在下一张图像显示时javascript不会减慢？
谢谢 - 如果有人有其他想法，我很乐意听到。
答案 0 :(得分：1)
即使图像通过CSS“隐藏”，您的第一种方法也会通过HTTP请求加载所有浏览器的所有图像。你的第二种方法或其中的一些变体可能更好。
我建议您使用AJAX随时下拉每张图片。绝对可以预加载图像。
您可能需要考虑jquery或javascript的现有幻灯片/灯箱类型的插件。它已经完成了很多次，你将重新创建轮子（除非它更像是一种学习经验）..
这是一个有趣的例子，预装回调以在准备好时提醒您。也许是一个很好的适应者？
http://binarykitten.me.uk/dev/jq-plugins/107-jquery-image-preloader-plus-callbacks.html
答案 1 :(得分：0)
第一种方法肯定会降级得更好。如果在受CSS挑战的浏览器上查看，它将使图像可用且可见。但这是以必须从一开始就拉下所有图像为代价的。第二种方法在初始命中时更轻，代价是增加了代码复杂度，使图像输入/输出。
您绝对可以使用Javascript预加载图片。只需创建一个图像对象并将其源设置为您想要的任何内容，这将自动触发图像下载。它不必插入DOM或用户可见以执行此操作。
隐藏的div 应该自动加载他们的内容，无论他们是否可见。我想不出任何不会这样做的基于PC的浏览器，但是我猜想有些浏览器打算用于限制资源的设备（一部用手机）可能会优化内容并延迟加载内容直到容器的可见，以节省网络流量。