从元素背景中获取图像元素作为DOM资源

Question

考虑以下小提琴： http : //jsfiddle.net/rf4hV/

在那儿，我正在听img的负载。 加载图像后，我得到一个具有图像资源target的event 。

1）当不使用jQuery加载器时，是否有任何资源可以抢占？ 我该怎么做？

2）我怎样才能为the-div background-image获取相同的资源？ 本质上，我希望看到与问题1中的event.target相同的属性。

Answer 1

一种获取一个元素的bg图像并将其添加到另一个DOM节点的jQuery方法：

的jsfiddle

  $(function() {          
      var bgimg = $("#the-div").css('background-image').replace(/url\(|\)/g,'');
      $("img").attr('src',bgimg);
      console.log($("img")[0]);
  });

这将为您提供src属性设置为#the-div的背景的DOM图像对象。

您也可以在没有jQuery的情况下甚至在没有将img元素添加到当前DOM树的情况下执行相同的操作

的jsfiddle

  var thediv = document.getElementById("the-div")
  var img = new Image();
  img.src = document.defaultView.getComputedStyle(thediv, null).getPropertyValue('background-image').replace(/url\(|\)/g,'');
  console.log(img);

现在，您有了一个DOM对象，您可以访问它的属性。

希望这就是您想要的。 如果不从该背景图像构造DOM对象，则不能将背景图像作为DOM对象访问，但这正是以上示例所做的。