Question

这是我在这里的第一个问题，所以原谅如果有人问错了:) 我想在加载网页之前预加载3张图片，这样所有图片都会出现在同一时刻。现在图像一个接一个地加载，看起来有点不稳定。一个图像在css（）中定义，另外两个是简单的“img”元素。我试过创建javascript图像对象 - 图像仍然加载不连贯，试图在display：none中加载它们; div - 仍然不稳定。我该怎么办？

感谢。

Answer 1

一个简单的解决方案是使用数据URI http://css-tricks.com/data-uris/

http://www.nczonline.net/blog/2010/07/06/data-uris-make-css-sprites-obsolete/

我认为应该修复它。

就IE而言，数据URI有一些限制，但我认为在这种情况下你应该称之为优雅降级。：）

编辑：我看到你提到的显示：没有divs。显示非div不会预加载您的图像。您需要将显示设置为阻止并以另一种方式隐藏div。设置z-index或-9999偏移量或其他一些。

Answer 2

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

Answer 3

这有效:(在此尝试：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>

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

3 个答案: