在网页加载之前预加载图片

Question

这是我在这里的第一个问题，请见谅，如果有什么不妥之处 :) 我想在网页加载之前预加载3张图片，以便它们同时出现。目前这些图片是一个接一个地加载，看起来有点断断续续。其中一张图片在CSS中定义，另外两张图片是简单的“img”元素。我尝试创建JavaScript图像对象 - 图像仍然缓慢加载，尝试在"display:none;"div中预加载它们 - 仍然缓慢。我应该怎么办？

谢谢。

- egis

---

忘了提一下 - 图片不能合并或用作CSS精灵，因为其中两个是用户上传的。 - egis

@egis 我很抱歉，我没有意识到我给出的答案是另一个问题的解决方案。我想我没有好好阅读你的问题。 - Lasse Espeholt

没问题。我其实很惊讶有这么多人来帮忙。非常感谢大家！ - egis

Answer 1

一种简单的解决方案是使用数据URI。数据URI可以将图像编码为文本，然后在CSS文件中使用。这个网站http://css-tricks.com/data-uris/详细介绍了如何使用数据URI。此外，http://www.nczonline.net/blog/2010/07/06/data-uris-make-css-sprites-obsolete/也提供了相关信息。需要注意的是，数据URI在IE浏览器上有一些限制，但在这种情况下，您应该考虑优雅降级。另外，如果您想预加载图像，请不要使用display:none divs，而是将其设置为block并以其他方式隐藏，例如设置z-index或-9999偏移量等。

- Mark

---

有趣的，以前没有见过。但是如果需要跨浏览器支持，直到IE 7消失，这不是一个选项。 - jdc0589

@jdc0589 嗯，为IE指定普通的URL和为其他浏览器指定URI是非常简单的。 - Mark

同意。剥夺IE用户某个功能确实让我感觉很好（认真的）。 - jdc0589

好的建议，但这是做不到的。我只有编辑HTML/CSS/jQuery的手段，而那些图片是用户上传的（我无法编写一些PHP代码将它们转换为base64）。我需要一些CSS/JavaScript/jQuery技巧，在页面加载/显示之前加载它们（如果可能的话）。 - egis

Answer 2

这个是有效的：（在此处尝试：http://dl.dropbox.com/u/186012/demos/loadatonce/index.html）

<!-- jQuery is required -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<!-- the images -->
<div class="showmetoo" style="background: url(jimhance-vader_inset.jpg)">
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></div>

<img class="showall" src="octopus3.jpg" alt="a picture"><br/>
<img class="showall" src="moorea.jpg" alt="a picture"><br/>

<!-- hidden by default -->
<style>
img.showall { visibility: hidden }
div.showmetoo { visibility: hidden }
</style>



<!-- the script -->
<script type="text/javascript">
var remaining = $('.showall').length;

function showthem(){
  remaining--;
  if(!remaining){
    $('.showall').css('visibility', 'visible');
    $('.showmetoo').css('visibility', 'visible');
  }
}

// bind the callback to the load event of the pictures.
$('.showall').bind('load',showthem);

// force the pictures to show (just in case)
setTimeout(showthem, 1000);  //just in case load event fires before callback is set.
</script>

- Sebastián Grignoli

Answer 3

最简单的解决方案可能是在加载所有三个图像之前，为它们显示一个加载gif，然后用实际图像替换gif。

- jdc0589

Answer 4

我注意到我的图片分辨率非常高 - 超出了网页所需的范围 - 类似于4500 X 6000，大小约为~300kB。因此，我使用图像编辑工具调整了大小，并将其缩小至400 X 600，大小约为~50kB。现在图片加载速度很快，并且在加载时不会显示空白空间。

- Aakash