如何預加載大尺寸圖片？

我有一定的聯繫，在鼠標移到這些鏈接，我改變<div>背景圖像如何預加載大尺寸圖片？

jQuery的我已經使用IS-

function imgchange() 
    { 
     $('.smenu li').mouseover(function(){ 
     var src = $(this).find('a').attr('href'); 
     $('.hbg').css('background-image', 'url(' + src + ')'); 
     $(this).find('hbg').attr('title', 'my tootip info'); 
     });  
    }

它工作正常，但問題是，當我運行它的服務器上圖像需要3-4秒才能更改，但第二次我將鼠標移到圖像上時會立即發生變化，我認爲這是因爲瀏覽器在緩存中存儲了圖像。所以我加了一個JavaScript來預加載在頁面的onLoad（）ivent圖片 -

<script language = "JavaScript"> 
function preloader() 
{ 
heavyImage = new Image(); 
heavyImage.src = "images/soluinfo1.jpg"; 
heavyImage.src = "images/soluinfo2.jpg"; 
heavyImage.src = "images/soluinfo3.jpg"; 
heavyImage.src = "images/soluinfo4.jpg"; 
heavyImage.src = "images/soluinfo5.jpg"; 
heavyImage.src = "images/soluinfo6.jpg"; 
heavyImage.src = "images/soluinfo7.jpg"; 
} 
</script>

<body onLoad="javascript:preloader()">

但這個劇本並沒有解決我的problem.what我應該怎麼辦？

來源

2010-07-21 nectar

@ Richard的答案（精靈）可能是你最喜歡的答案，但是你的代碼不工作的原因是，在大多數瀏覽器中，只有最後的heavyImage.src=""纔有足夠的時間實際註冊到瀏覽器一個實際的請求。您只創建一個Image對象設置，並且比瀏覽器可以請求文件更快地重置.src屬性（我認爲現代JavaScript引擎採取了額外的步驟，特別是因爲這個原因刪除了所有中間.src語句）。

有幾種方法可以解決這個問題。最簡單的方法是創建多個Image對象，每個圖像一個。而要做到這一點最簡單的方法就是通過這樣的：

<script type="text/javascript"> 
function preloader() 
{ 
    function doPreload(strImagePath) 
    { 
     var heavyImage = new Image(); 
     heavyImage.src = strImagePath; 
    } 

    var arrImages = ["images/soluinfo1.jpg","images/soluinfo2.jpg","images/soluinfo3.jpg","images/soluinfo4.jpg","images/soluinfo5.jpg","images/soluinfo6.jpg","images/soluinfo7.jpg"]; 
    for (var i = 0; i < arrImages.length; i++) { 
     doPreload(arrImages[i]); 
    } 
} 
</script>

通過將heavyImage變量自身的功能裏面（記得用var關鍵字），你確保Image對象自身的內部存在專用範圍。

另一種方法是將「加載」事件偵聽器附加到一個heavyImage。每次圖像加載完成後，都要抓取下一張圖像。這種方法的缺點是你的圖像一次只能加載一次（對導航圖像不好，但對圖像庫很有用），而第一種技術將並行獲取圖像（通常每次四個）。

來源

2010-07-21 13:39:19 Andrew

您可能會發現更改您的方法並使用CSS sprites（and another article）更容易。然後，您只需引用一個圖像，然後使用CSS設置該圖像的哪一部分在哪種情況下顯示。

這假定您正在使用的圖像在您的控制之下，您可以使用圖像編輯器將它們合併爲一個大圖像。

來源

2010-07-21 09:43:53

BIG +1。我在使用在線精靈創作者方面取得了非常好的成績，例如[this one]（http://spritegen.website-performance.org/）。上傳所有圖像並下載單個圖像和CSS文件。如果您之前沒有嘗試過，則對網頁效果的淨效果是驚人的。 – Andrew 2010-07-21 13:21:49

如何預加載大尺寸圖片？

回答

相關問題