在网页中高效加载隐藏/分层图像
我有一个分层的 div 组件，它通过滑动动画关闭顶部图像以显示下面的下一个图像来显示一系列连续的大 kb 图像。我试图了解如何最好地解决这个问题。
方法 1：
将多个 div 叠加在一起，每个 div 都指定一个图像作为背景，然后根据需要滑开 div。
隐藏的 div 会在页面加载时加载图像，还是仅在显示时加载图像？这是浏览器/客户端特定的行为吗？所有图像（jpeg、png）在这方面的行为方式都相同吗？
方法 2：
仅使用两个 div - 一个用于处理滑动，另一个用于加载并显示下一张图像。
在这种情况下，是否可以预加载下一个图像，以便在显示下一个图像时 JavaScript 不会变慢？
谢谢——如果有人有其他想法，我很想听听。
I have a layered div component which displays a successive series of large kb images by slide-animating away the top image to reveal the next image below. I'm trying to understand how best to approach this.
Approach 1:
layer a number of divs on top of each other, each with an image assigned as background, and slide away the divs as needed.
Will the hidden divs load their images on page load, or only when they are revealed? Is this browser/client specific behavior? Do all images (jpegs, pngs) behave the same way in this regard?
Approach 2:
Use only two divs- One that handles sliding, the other that will load and reveal the next image.
In this case, is it possible to pre-load the next image, so that the javascript isn't slowed down when the next image is revealed?
Thanks- and if anyone has other ideas, I'd love to hear them.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您的第一种方法，即使图像通过 CSS“隐藏”，也会通过 HTTP 请求由所有浏览器加载所有图像。您的第二种方法或其某些变体可能更好。
我建议您使用 AJAX 来下拉每个图像。绝对可以预加载图像。
您可能需要考虑 jquery 或 javascript 的现有幻灯片/灯箱类型插件。它已经完成了很多次，您将有点重新创建轮子（除非它更多的是一种学习体验）。
这是一个有趣的预加载示例，带有回调，以便在准备就绪时提醒您。也许是一个很好的适应方式？
http://binarykitten.me。 uk/dev/jq-plugins/107-jquery-image-preloader-plus-callbacks.html
Your first approach, even if the images are 'hidden' via CSS, will load all images by all browsers via HTTP requests. Your second approach or some variant of it is probably better.
I'd recommend using AJAX to pull down each image as you go. It's definitely possible to preload the images.
You may want to consider existing slideshow/lightbox type of plugins for jquery or javascript. It's been done so many times you will sort of be recreating the wheel (unless it's more of a learning experience thing)..
Here's an interesting example of preloading with callbacks to alert you when it's ready. Maybe a good one to adapt?
http://binarykitten.me.uk/dev/jq-plugins/107-jquery-image-preloader-plus-callbacks.html
第一种方法当然性能下降得更好。如果在受 CSS 限制的浏览器上查看，它将使图像保持可用且可见。但这的代价是必须从一开始就撤掉所有图像。第二种方法在初始命中上较轻，但代价是增加了交换图像输入/输出的代码复杂性。
您绝对可以使用 Javascript 预加载图像。只需创建一个图像对象并将其源设置为您想要的任何内容，这将自动触发图像的下载。不需要将其插入到 DOM 中或对用户可见即可执行此操作。
隐藏的 div应该自动加载其内容，无论它们是否可见。我想不出任何基于 PC 的浏览器不会这样做，但我大胆猜测，一些针对资源有限的设备（例如手机）的浏览器可能会优化内容并延迟加载内容，直到容器的可见，以节省网络流量。
The first approach certainly degrades better. It will leave the images available and visible if viewed on a CSS-challenged browser. But that comes at the cost of having to pull down all the images from the get-go. The second approach is lighter on the initial hit, at the cost increased code complexity swapping images in/out.
You can definitely pre-load images with Javascript. just create an image object and set its source to whatever you want, which will automatically trigger downloading of the image. It doesn't have to be inserted into the DOM or visible to the user to do this.
Hidden divs SHOULD load their content automatically, whether they're visible or not. I can't think of any PC-based browsers that wouldn't do this, but I'd hazard a guess that some browsers intended for resource-limited devices (cell phones for one) might optimize things and delay loading contents until the container's made visible, to save on network traffic.