Question

我试图编写一个函数，一旦元素中的最后一个图像被加载，它就将它设置为父母背景图像，但我似乎无法使其工作......

我可以提醒源但由于某种原因不会影响没有控制台错误的父级吗？

function swapImage(){

var elem = $('.team-member img:last-child');
if (!elem.prop('complete')) {
  console.log("Waiting to be loaded!");
  elem.on('load', function() {
    elem.parent().css('background-image', elem.attr('src'));
  });
} else {
  elem.parent().css('background-image', elem.attr('src'));
}

}

swapImage();

Answer 1

到目前为止，你没有任何循环。我也不知道你的意思

!elem.prop('complete')

如果你想循环播放所有图像并检查它们是否已加载，那就是你需要的：

function swapImage(){
  var parents = $('.team-member');

  parents.each(function(i) {
    var images = $(this).find('img');

    images.each(function(i) {
        $(this).load(function() {
            console.log('loaded image!');
        });
    })
  });
}

swapImage();

但是我们没有得到console.log“加载图像！”。这可能是因为在此函数启动之前已经加载了图像。此外，onload工作异步，因此$ .each-loop将继续。您可以设置一个全局变量并将图像写入其中而不是console.log 。然后你知道最后加载了哪一个，但是由于它是异步的，你需要调用另一个函数来检查是否所有图像都已加载。

无论如何，你也错过了设置正确的CSS风格background-image: url('...')：

elem.parent().css('background-image', 'url('+elem.attr('src')+')');

当图像加载改变背景，jQuery

1 个答案: