JavaScript/jQuery：运行DOM命令*after*img.onload命令

我需要获得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（）{…}

检索宽度和高度，但无法从img.onload中访问DOM

$（元素）

调用

简而言之，我对javascript有点生疏，不知道如何将图像参数同步到DOM中。谢谢你的帮助

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

您可以使用它来阻止jQuery的

ready

方法在加载所有图像之前触发。此时，它们的宽度和高度将立即可用

通过调用

$.holdReady（true）

启动。在每个图像的

onload

方法中，检查总共加载了多少图像，如果这与预期的图像数量匹配，则可以

$.holdReady（false）

触发就绪事件

如果您无权访问

$.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];
}

var-images={“已加载”：0，
“图像”：[
"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"
]};
函数outputMarkup（）{
if（++images.load===images.images.length）{
/*使用图像宽度绘制HTML*/
}
}
对于（var i=0；i

我不理解使用图像加载处理程序的问题。此外，我认为这是一个简化的示例，但基于此，您可能只需要从一开始就生成您想要的标记。没有？为回应干杯。据我所见，img onload中不允许调用$（'body'）.css。（他们带着TypeError回来了：不能从null调用.css）听起来不对。也许有什么东西在阴影中$？你的真实代码是否使用了<代码>$。没有冲突<代码>？哦-胡说八道，你是对的。这纯粹是一个冲突问题。相反，运行jQuery（）会在图像onload中获取$（body）。（抱歉-不是我的代码库，非常旧，而且被古老的JavaScript弄得千疮百孔）好了

img.onload=function（）{…}

将起作用。XY问题再次出现。非常感谢-解决方案非常优雅，但不幸的是，我使用的是jQuery1.4.4。据我所见，holdReady是1.6+，我无法在站点上更新jQuery版本。对不起，我应该指定您可以执行类似的功能。不要从

$（document.ready（）

）中执行任何输出-仅当所有图像都已加载时才执行此操作。见我的更新上面。如果有什么不同的话，您可以用一条消息启动DOM：“正在加载图像…”您不应该使用如此古老的版本。为什么你不能升级？考虑发布一个新的问题，让人们帮你解决升级带来的问题。R:为什么我不能升级：我画了短棒，不得不更新一个非常旧的、非常破旧的网站，一个程序员怀疑我把他的脸撞到键盘上，直到一个网站出现。除了一大碗JavaScript意大利面，jQuery库本身也有猴子补丁。简言之，我们同意对该站点进行的唯一升级将从废弃整个代码库开始。