在網頁加載之前預載圖像

這是我的第一個問題，所以請諒解是否有問題:) 我想在加載網頁之前預先加載3張圖像，以便它們全都出現在同一時刻。現在圖像一個接一個地加載，看起來有點波濤洶涌。一個圖像在css（）中定義，另外兩個是簡單的「img」元素。我試圖創建JavaScript圖像對象 - 圖像仍然加載波濤洶涌，試圖預載他們在顯示：無;格 - 仍然波濤洶涌。我該怎麼辦？在網頁加載之前預載圖像

謝謝。

來源

2010-08-22 egis

忘了提 - 圖像不能被合併或用作CSS精靈「，導致他們2個是用戶上傳的。 – egis 2010-08-22 21:03:24

@egis我道歉，我沒有意識到我給出的答案是解決另一個問題。我想我沒有讀好你的問題。 – 2010-08-22 21:26:08

沒問題。實際上我很驚訝有多少人來幫忙。非常感謝你！ – egis 2010-08-22 21:50:59

這工作：（這裏試試吧：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>

來源

2010-08-22 21:29:26

這確實有效！ – egis 2010-08-22 21:49:56

一個簡單的解決方案是使用數據URI http://css-tricks.com/data-uris/

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

我覺得也許應該修復它。

數據URI在IE瀏覽器中有一些限制，但我認爲在這種情況下，你應該把它稱爲優雅的降級。 :)

編輯：我看到你提到的顯示：none divs。顯示非div不會預載您的圖像。您需要將顯示設置爲阻止並以另一種方式隱藏div。設置z-index或-9999偏移或其他。

來源

2010-08-22 20:53:13 Mark

有趣，以前沒見過。但是，如果需要跨瀏覽器支持，直到 jdc0589 2010-08-22 20:55:53

@ jdc0589好了，爲IE和uris指定正常的URL是非常簡單的。 – Mark 2010-08-22 20:58:15

同意。它確實讓我感覺很好，能夠剝奪IE用戶的功能（認真）。 – jdc0589 2010-08-22 21:00:05

最簡單的解決方案可能是顯示所有三個圖像的加載gif，直到它們全部加載完畢，然後用實際圖像替換gif。

來源

2010-08-22 20:54:00 jdc0589

在網頁加載之前預載圖像

回答

相關問題