代码之家 › 专栏 › 技术社区 › egis

网页加载前预加载图像

css html jquery javascript

egis · 技术社区 · 16 年前

这是我的第一个问题,所以如果有什么问题请原谅:) 我想在网页加载前预装3张图片,这样所有的图片都会在同一时刻出现。现在图像一个接一个地加载,看起来有点起伏。一个图像是在css()中定义的,另外两个是简单的“img”元素。我尝试过创建javascript图像对象-图像仍然加载不稳定,尝试将它们预加载到显示:无;div-仍然波涛汹涌。我该怎么办?

谢谢。

3 回复 | 直到 16 年前

Nightfirecat peSHIr 15 年前

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>