問題與jquery和ie和加載圖像

我有一個網頁由三部分組成，腳本，風格和正文。身體只是圖像的表格 - 問題在於，當您第一次加載網站時，所有圖像都會將圖像加載到另一個圖像上 - 一個真正的混亂。圖像應該都是不可見的，只有當某些單詞被點擊時纔會出現 - 這些都是用javascript完成的。一旦所有的圖像加載，它們全部消失，然後網站按照它應有的方式工作。這就好像所有的圖像首先在可見的情況下被讀取，然後JavaScript踢入並隱藏它們，因爲它們被標記爲javascript隱藏的div標識。我沒有safari 4.0.3和mozilla的這個問題 - 但我的safari老版本有這個問題。任何方式來防止圖像最初是可見的？問題與jquery和ie和加載圖像

來源

2009-10-22 joe

請粘貼一些代碼。 – 2009-10-22 05:57:33

您可以預先緩存圖像並僅在需要時才顯示圖像，而不是下載圖像並隱藏它們。

image1 = new Image(); 
image1.src = "..../../...jpg"; 
image2 = new Image(); 
image2.src = "..../../...jpg"; 
image2 = new Image(); 
image2.src = "..../../...jpg";

然後，當你需要的圖片，將它們添加到src

例如

<img id='img1'onMouseClick="this.src=image1.src" />

如果您使用的是jQuery，那麼最好爲它獲取一些插件。

來源

2009-10-22 06:13:08

謝謝 - 我正在使用jquery。我想看看我可以如何讓你的建議工作。有一些縮略圖的表格。單擊某個單詞時，會出現一組縮略圖，另一組縮略圖會消失。縮略圖是燈箱演示文稿的一部分。當點擊縮略圖時，顯示較大的圖像。 – joe 2009-10-22 06:29:09

哦，就像你想要實現'Next Image Set'，那麼一個縮略圖會消失，另一個會出現？當該人點擊該縮略圖時，它將顯示爲燈箱演示文稿？我是否正確？ – 2009-10-22 08:53:26

默認情況下，嘗試使用CSS隱藏圖像。 CSS規則比JavaScript更早應用。
一個常見的做法是將一個類添加到正文中。例如，獲得css：

body img {display:none;} 
body.JSLoaded img {display:inline;}

默認情況下圖像將被隱藏。當JavaScript加載時，將JSLoaded添加到正文中，並顯示圖像。
這也是一個很好的方式來優雅地降低您的網站沒有JavaScript的客戶端。

來源

2009-10-22 06:19:59 Kobi

預加載圖像的非javascript方法只是將它們放入內置風格隱藏div中。

<div id="preload" style="height:1px;overflow:hidden;width:1px;padding:1px;"> 
    <img src="image1.jpg" alt="" /> 
    <img src="image2.jpg" alt="" /> 
    <img src="image3.jpg" alt="" /> 
</div>

這將加載所有圖像，並將它們保存在緩存中，以便稍後在其他位置顯示它們。

我沒有做display:none;，因爲有些瀏覽器往往不加載dom元素中沒有顯示的圖像。儘管如此，這應該讓所有的圖片都看不見。

來源

2009-10-22 06:23:19

問題與jquery和ie和加載圖像

回答

相關問題