在网页中有效加载隐藏/分层的图像 [英] Efficiently loading hidden/layered images in web page
问题描述
我有一个分层的div组件，它通过幻灯片动画显示连续的一系列大kb图像，将顶部图像动画显示，以显示下面的下一张图像。方法1：
$ b p>将多个div彼此叠加，每个div都有一个背景图像，并根据需要滑动div。
隐藏的div会加载它们页面加载时的图像，还是仅当它们显示时才显示？这是浏览器/客户端特定的行为？所有图片（jpegs，pngs）在这方面的表现都一样吗？
方法2：
只使用两个div - 一个处理滑动，另一个将加载并显示下一个图像。
在这种情况下，是否可以预加载下一张图片，以便在下一张图片显示时JavaScript不会变慢？
感谢 - 如果有人有其他想法，我很乐意听到他们。
第一种方法，即使图像通过CSS隐藏，也会通过HTTP请求加载所有浏览器的所有图像。你的第二种方法或它的一些变种可能会更好。
我建议使用AJAX来随时下拉每张图片。预先加载图像是完全可能的。
您可能需要考虑现有的幻灯片/灯箱类型的jquery或javascript插件。它已经完成了很多次，你会重新创建轮子（除非它更像是一种学习体验）。
下面是一个有关预加载回调的有趣示例：准备就绪时提醒你。也许一个很好的适应？
http://binarykitten.me.uk/dev/jq-plugins/107-jquery-image-preloader-plus-callbacks.html
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.
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
这篇关于在网页中有效加载隐藏/分层的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
