如何爲圖像構建JavaScript預加載器

我有一個縮略圖頁面，它使用jquery中內置的圖像交換腳本通過懸停來改變其不透明度。但是，當我在一個實時網站上運行它時，速度很慢，您必須等待加載第二張圖像，否則懸停交換不會馬上發生。如何在頁面加載時預加載所有的縮略圖？該網站是活here 如何爲圖像構建JavaScript預加載器

下面是HTML

<div class="span-16 last" id="thumbs"> 
     <div class="span-4"> 
      <a href="waterfront.php"><img src="images/thumbs/thumb1.gif" id="thumb1"></a> 
     </div> 

    </div><!--THUMBS ENDS-->

這裏是jQuery的

$("#thumb1").hover(
     function(){ 
      $("#thumb1").attr("src","images/thumbs/thumb1A.gif"); 
      }, 

     function(){ 
      $("#thumb1").attr("src","images/thumbs/thumb1.gif"); 

     });

來源

2010-07-28 Cool Guy Yo

Here is an article to help you。

它正在DOM中創建img元素。

我經常通過製作new Image()，然後將其src屬性設置爲圖像位置來完成此操作。加載時會觸發一個事件，即onload。

所以一個簡單的例子是

var preload = new Image(); 

preload.onload = function() { // I believe you need to define this before you set the src for IE 
    alert('loaded'); 
} 

preload.src = 'path/to/image.png';

來源

2010-07-28 23:48:30 alex

我該怎麼做多個圖像？ – 2010-07-29 00:26:27

要建立在Alex的答案

var images = ['a.jpg','b.jpg','c.jpg']; 
var preload = []; 
for(i in images) 
{ 
    preload[i] = new Image(); 
    preload[i].src = images[i]; 
}

本預裝了images陣列中的所有圖像。該腳本假定您事先知道您想要預加載哪些圖像。

來源

2010-07-29 13:15:09

但是這不會告訴你圖像何時完全預加載。 – joseeight 2010-07-31 15:11:59

看到我對我投票的解決方案的評論。有關添加具有回調功能的真預加載程序的更多信息，請參閱此處：http://farinspace.com/jquery-image-preload-plugin/

由於重要的是您預先載入了翻車圖像，因此您可能不希望在加載這些圖像之後顯示菜單。你可以隱藏init的菜單並在onload回調中顯示它。

來源

2010-07-31 15:16:40 joseeight

如何爲圖像構建JavaScript預加載器

回答

相關問題