jQuery - 从 src 创建背景图像的问题

Question

我正在尝试使用 background-image: url() 从 img 标签 src 创建一个 div，这有点工作，但问题是它克隆了第一张图像，然后将其用于其余图像你可以在 fiddle 中看到。

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