2011-12-28 68 views
0

一個不錯的成員幫我預加載CSS背景圖片,我以爲我會擴大,爲更多的預裝背景圖像,但是當我試圖使一個演示中,我遇到了問題。預加載多個背景

這是原文:

var src = 'image1.jpg' 
    , $img = $('<img src="' + src + '">'); 

$img.bind('load', function(){ 
    $('#SomeDiv').css('background-image', 'url(' + src + ')'); 
    //more code here 



}); 
if($img[0].width){ $img.trigger('load'); } 

這就是我所做的:

var src1 = 'image1.jpg' 
    , $img1 = $('<img src="' + src1 + '">'); 

var src2 = 'image2.jpg' 
    , $img2 = $('<img src="' + src2 + '">'); 

$img1.bind('load', function(){ 
    $('#SomeDiv').css('background-image', 'url(' + src1 + ')'); 
    //more code here 
}); 

$img2.bind('load', function(){ 
    $('#AnotherDiv').css('background-image', 'url(' + src2 + ')'); 
    //more code here 
}); 


if($img[0].width){ $img.trigger('load'); } 

這裏的 '工作' 例如: http://jsfiddle.net/pufamuf/k2Ycv/

感謝大家的幫助:) )

+0

檢查底部的線。 '''img'''不再存在。 – 2011-12-28 21:54:08

+0

你說得對。我把它改成$ IMG1,但是我只注意到有一個錯誤,不管我做什麼'$ IMG1是null'。 – pufAmuf 2011-12-28 21:57:45

回答

1

原文:

if($img[0].width){ $img.trigger('load'); } 

應該是:

if($img1[0].width){ $img1.trigger('load'); } 
if($img2[0].width){ $img2.trigger('load'); } 
+0

由於庫木,但我只注意到我的代碼的beggining得到一個錯誤,看到以下內容:http://jsfiddle.net/pufamuf/k2Ycv/2/。 '$ IMG1是null' – pufAmuf 2011-12-28 21:59:20

+0

所以看着你的jsfiddle,您使用的哞工具作爲框架,將其更改爲jQuery和它應該工作 – Kumu 2011-12-28 22:31:22

+0

由於庫木。這和我的ID開始與資本實際上是這個問題。我不知道爲什麼,但你不能以大寫開頭的ID:/。 – pufAmuf 2011-12-29 01:53:03