jQuery的 - 從src創建背景圖像的問題

Question

我想創建一個背景圖像的div：url（）從img標籤src這是一種工作，但問題是，它克隆了第一個圖像，然後正如你可以在小提琴中看到的那樣，將其用於其餘的圖像。

http://jsfiddle.net/tRmVT/

$('.panel .panel-slider').append('<div class="backbg"></div>'); 

var img = new Image(); 

function imgLoaded() { 
    $('.panel .panel-slider .backbg').css("background-image", "url(" + img.src + ")"); 
} 

img.onload = imgLoaded; 
img.src = $('.panel .panel-slider .bg-fix').attr('src'); 
if (img.complete || img.readystate === 4) { 
    imgLoaded(); 
} 

// $('.panel-slider .bg-fix').remove(); 

有誰知道我怎麼能解決這個問題？

感謝

Answer 1

我認爲更好的解決方案是不是隱藏現有IMG元素，而不是創造新的形象元素，如

.panel .bg-fix { 
    display: none; 
} 

然後

//create the target elements 
$('.panel .panel-slider').append('<div class="backbg"></div>'); 

//register load event handlers for the element 
$('.panel .panel-slider .bg-fix').load(function() { 
    //set the background image 
    $(this).next().css("background-image", "url(" + this.src + ")"); 
    //remove the img element 
    $(this).remove() 
}).filter(function() { 
    //if the image is already loaded then filter them 
    return this.complete || this.readystate === 4 
}).trigger('load'); //trigger load event manually for already loaded images 

演示：Fiddle

---

您的解決方案：Fiddle