2

我需要获取 CSS 背景图像的宽度和高度并将其注入到 document.ready javascript 中。就像是：

$(document).ready(function(){
  img = new Image();
  img.src = "images/tester.jpg";


  $('body').css('background', 'url(' + img.src + ')');
  $('body').css('background-size', img.width + 'px' + img.height + 'px');
});

问题是，在 document.ready 时没有加载图像的宽度和高度，所以这些值是空白的。（它们可以从控制台访问，但之前不能）。

img.onload = function() { ... }检索宽度和高度，但$(element)无法从 img.onload 中访问 DOM 调用。

简而言之，我的 javascript 有点生疏，不知道如何将图像参数同步到 DOM 中。任何帮助表示赞赏

编辑：jQuery 版本是 1.4.4，无法更新。

4

1 回答 1

2

您可以使用它$.holdReady()来阻止 jQuery 的ready方法在所有图像加载之前触发。那时，它们的宽度和高度将立即可用。

打电话加星$.holdReady(true)。在onload每个图像的方法中，检查总共加载了多少图像，如果与预期图像的数量相匹配，您可以$.holdReady(false)触发 ready 事件。

如果您无权访问$.holdReady()，则只需等待吐出您的 HTML，直到所有图像都已加载，仍然调用一个函数：

var images = { 'loaded': 0,
               'images': [
                 "http://placekitten.com/500/500", 
                 "http://placekitten.com/450/450", 
                 "http://placekitten.com/400/400",
                 "http://placekitten.com/350/340", 
                 "http://placekitten.com/300/300", 
                 "http://placekitten.com/250/250",
                 "http://placekitten.com/200/200", 
                 "http://placekitten.com/150/150", 
                 "http://placekitten.com/100/100"
               ]};

function outputMarkup() {
  if ( ++images.loaded === images.images.length ) {
    /* Draw HTML with Image Widths */ 
  }
}

for ( var i = 0; i < images.images.length; i++ ) {
  var img = new Image();
  img.onload = function(){
    outputMarkup();
  };
  img.src = images.images[i];
}
于 2012-05-13T06:24:05.870 回答