javascript - 在事先不知道的情况下设置 div 背景图像的高度和宽度

Question

使用 jQuery:

每当有人向 div 添加背景图像时，都需要提前知道背景图像的宽度和高度。

例如

$("#id-of-some-div").css(
{
   backgroundImage: 'url(' + backgroundImageUrl + ')',
   height: 200,
   width: 450,
   position: 'absolute',
   top: 20,
   left: 20
});

我可以通过使用如下代码简单地获取图像的大小吗:

我已经测试了以下内容，但它不起作用，是因为我无法在 $.load 函数内使用 return 语句吗？ -我猜 return 语句需要始终同步，对吧？

例如

var bgImageUrl = "/*insert image url*/";

var backgroundImageHeightAndWidth = function(backgroundImageUrl)
{
   var backgroundImageSize = [];
   var backgroundImage = new Image();
   backgroundImage.src = backgroundImageUrl;
   backgroundImage.id = "background-image-id";
   $("#background-image-id").load(function ()
   {
      backgroundImageSize.push($("#background-image-id").height());
      backgroundImageSize.push($("#background-image-id").width());
      return backgroundImageSize;   
   });
};
var backgroundImageHeightAndWidthArray = backgroundImageHeightAndWidth();
var backgroundImageHeight = backgroundImageHeightAndWidthArray[0];
var backgroundImageWidth = backgroundImageHeightAndWidthArray[1];

$("#id-of-some-div").css(
{
   backgroundImage: 'url(' + backgroundImageUrl + ')',
   height: backgroundImageHeight,
   width: backgroundImageWidth,
   position: 'absolute',
   top: 20,
   left: 20
});

Answer 1

var bg = "/*insert image url*/";

var bgimg = new Image();
bgimg.onload = function() {
    var elem = document.getElementById('id_of_element');
    elem.style.backgroundImage = 'url(' + bg + ')';
    elem.style.height          = this.height + 'px';
    elem.style.width           = this.width + 'px';
    elem.style.position        = 'absolute',
    elem.style.top             = '20px';
    elem.style.left            = '20px';
});
bgimg.src = bg;