Question

我正在尝试用img标签src创建一个带有background-image：url（）的div，这有点工作，但问题是它克隆了第一个图像，然后将其用于其余图像你可以在小提琴中看到。

$('.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

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

1 个答案: