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

unhi4e5o  于 2023-01-18  发布在  其他
关注(0)|答案(4)|浏览(141)

这是我在这里的第一个问题,所以请原谅,如果有什么是问错了:)我想在网页加载前预加载3张图片,这样所有的图片都会在同一时刻出现。现在图片加载一个接一个,看起来有点起伏。一张图片是在css()中定义的,其他两张是简单的"img"元素。我试着创建javascript图像对象-图像加载仍然起伏,试着在显示中预加载它们:没有;仍然起伏不定。我该怎么办?
谢谢。

6bc51xsx

6bc51xsx1#

一个简单的解决方案是使用数据URI http://css-tricks.com/data-uris/
http://www.nczonline.net/blog/2010/07/06/data-uris-make-css-sprites-obsolete/
我想这样应该能解决问题。
就IE而言,数据URI有一些限制,但我认为在这种情况下,您应该称之为优雅降级。:)
编辑:我看到你提到显示:无div。显示非div将不会预加载您的图像。您需要设置显示以阻止和隐藏div在另一种方式。设置z索引或-9999偏移量或一些这样的。

nx7onnlm

nx7onnlm2#

这个方法有效:(在这里试试: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>
pu3pd22g

pu3pd22g3#

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

vxqlmq5t

vxqlmq5t4#

我注意到我的图片分辨率非常高--超过了网页所需的分辨率--比如4500 X 6000--大小为~300kB。所以,我用图片编辑工具调整了大小,并将大小稀释为400 X 600,大小为~50kB。现在图片加载速度相当快,加载时不会显示空白。

相关问题