在My Layout中有一些大圖像（來自XML），當我將鼠標懸停在某些鏈接上時會顯示這些大圖像，但是當頁面加載時以及滾動時需要時間加載該圖像。如何預加載圖像沒有JavaScript？

注：有修復5個圖像（非動態）

我不想使用JavaScript來預先載入圖像的任何解決方案？

我沒有使用懸停菜單或類似的東西，但這張圖片是產品圖片和鏈接是文字鏈接得到了我的觀點？

來源

2009-05-04 Wasim Shaikh

@tharkun這是如何重複。那些是「與」;這是「沒有」。 – 2009-05-04 09:17:52

woa，我的壞！ steretypes！抱歉！ – markus 2009-05-04 09:20:31

請參閱 - http://stackoverflow.com/q/1373142/104380 – vsync 2014-01-10 20:29:46

從http://snipplr.com/view/2122/css-image-preloader

一個低技術含量，但有用的技術，只使用CSS。將css放入樣式表後，將其插入頁面主體標記的下方：無論何時在整個頁面中引用圖像，它們現在都將從緩存中加載。

#preloadedImages 
{ 
    width: 0px; 
    height: 0px; 
    display: inline; 
    background-image: url(path/to/image1.png); 
    background-image: url(path/to/image2.png); 
    background-image: url(path/to/image3.png); 
    background-image: url(path/to/image4.png); 
    background-image: url(); 

}

來源

2009-05-04 11:56:53

非常感謝AZIZ。這對Preload來說是非常好的解決方案。仍希望有更多的解決方案。然後關閉答案， – 2009-05-04 13:50:19

+13

這大多數DEFINITLY不起作用。只有最後一個空的url（）被解析。 – vsync 2011-12-07 12:33:55

太棒了!!!!!!!!!!! – SpaceDog 2014-01-06 22:47:29

引用你的圖像在不可見的img標籤。而頁面加載他們也會下載。

來源

2009-05-04 09:00:28 Canavar

您不能將它們作爲<img />標記添加到您的頁面並使用css隱藏它們嗎？

來源

2009-05-04 09:01:16 Peter

=滯後（在某些瀏覽器中） – 2017-04-21 23:46:07

你可以使用一個隱藏的div來放置圖像。像這樣

<html> 
<body> 
<div style="width:1px; height:1px; visibility:hidden; overflow:hidden"> 
    <img src="img1.jpg" /><img src="img2.jpg" /> 
</div> 
<div>Some html</div> 
</body> 
</html>

這僅適用於影像作品雖然，即。如果你想爲.swf文件做同樣的事情，會出現問題。如果不可見，Firefox不會運行.swf文件。

來源

2009-05-04 09:03:43

您是否也需要顯示：無可見性仍會佔用空間？但我也相信，有些瀏覽器在顯示之前不會加載隱藏的圖像。 – 2009-05-04 09:17:12

這真是很好的解決方案，我們也可以使用position絕對和;高度：0在CSS中，不是嗎？ – 2009-05-04 09:28:28

如果它隱藏時未加載，也許它會幫助有一些「可見」跨度/ div高度0與style =「background：url（imgx.jpg）」？只是一個想法...不知道它是否有幫助或工作：p – Svish 2009-05-04 09:32:27

沒有必要預載圖像。我不明白爲什麼99％的人認爲，懸停效果必須使用2張圖片。沒有這種需要，使用2張圖像會使它看起來很糟糕。我知道的唯一好的解決方案是使用CSS的A元素（或簡單JS的所有其他按鈕）。當我們按下我們將設置的背景位置懸停到某個偏移位置。

a { display:block; width:160px; height:26px; background:url(b_tagsdesc.png); } 
a:hover { background-position:0 26px }

這一切，使用的圖像下面可以看到：

alt text http://www.margonem.pl/img/b_tagsdesc.png

編輯：您還可以用它其他方式。而不是切換圖像，你可以隱藏你的圖像。所以起點將是「背景位置：0 -100像素」和懸停「0 0」。

這種技術被稱爲CSS精靈 - 這是它很好的說明：http://css-tricks.com/css-sprites/

來源

2009-05-04 09:12:18 Thinker

我不能強調這一點。這是（唯一）的方法。 – Kriem 2009-05-04 18:17:52

謝謝..的解釋 – 2009-05-05 04:51:46

漂亮的緊湊型樣本。以這種方式幫助我做了很多事情。 – Marc 2012-06-21 11:10:32

正如我不知道是否隱藏圖像加載，你可能會想使用image sprites。然後在顯示任何內容之前加載整個圖像。您甚至可以將所有菜單項放在一個圖像中，因此可以節省大量的HTTP請求。

來源

2009-05-04 09:20:44

的技術，我沒有看到這裏沒有提到，如果你並不需要擔心IE6 & 7偉大的工程，是使用:after僞選擇將圖像添加爲content到頁面上的一個元素。下面的代碼從this article解禁：

body:after { 
    content: url(img01.jpg) url(img02.jpg) url(img03.jpg); 
    display: none; 
}

我可以看到這與使用JavaScript來預載的圖片唯一的缺點是，有沒有簡單的方法來從內存中釋放出來。

來源

2012-07-08 18:01:57

這是答案，唯一正確的做法。 – vsync 2013-01-17 23:38:21

雖然這個_mostly_有效，但某些瀏覽器（例如Opera）不會下載圖像以供顯示：無元素。 http://www.quirksmode.org/css/displayimg.html – 2014-08-28 11:15:58

但是，您可以在不顯示任何內容的情況下將其包括在內，而是將其放在繪製區域之外：'background-position：-100px -100px;'。 – 2014-08-28 11:24:56

HTML5有一個新的方法可以做到這一點，通過link prefetching。

<link rel="prefetch" href="http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png" />

，你在你的HTML需要，你是好去只是增加了許多link標籤。當然，舊版瀏覽器不會以這種方式加載內容。

UPDATE

如果您的服務器送達HTTP2，你也可以在你的迴應中添加Link頭的化妝用的HTTP2 Server Push。

Link: <http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png>; rel=preload; as=image;

來源

2013-09-16 17:55:54

如果預加載圖像是你所尋找的，那麼性能就是你想要的。我懷疑阻止頁面，而資源加載是你想要的。所以，只需將一些預取鏈接放在主體的末端，並將僞造媒體添加到它們中，以使它們看起來不重要（以便在其他所有內容之後加載它們）。然後，將onload標籤添加到這些鏈接中，並且在這個onload中將會設置頁面中實際資源來源的代碼。例如，這甚至可以與動態iframe結合使用。

前：

<a onclick="myFrame.style.opacity=1-myFrame.style.opacity;myFrame.src='http://jquery.com/'"> 
 
    Click here to toggle it 
 
</a><br /> 
 
<iframe id="myFrame" src="" style="opacity: 0"></iframe>

後：

<a onclick="myFrame.style.opacity=1-myFrame.style.opacity"> 
 
    Click here to toggle it 
 
</a><br /> 
 
<iframe id="myFrame" src="" style="opacity: 0"></iframe> 
 
<link rel="prefetch" href="http://jquery.com/" 
 
     onload="myFrame.src=this.href" media="bogus" />

通知的第一個（前）如何凍結了該頁面，並在閃爍一個非常醜陋的方式，而第二個（之後）內容預裝不會凍結頁面或眨眼，而是它會立即出現和消失。

來源

2017-04-21 01:22:28

如何預加載圖像沒有JavaScript？

回答

前：

後：

相關問題