Question

我需要得到宽度和宽度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 $(element)调用。

简而言之，我的javascript上有点生疏，无法弄清楚如何将图像参数同步到DOM中。任何帮助表示赞赏

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

Answer 1

您可以使用$.holdReady()来阻止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];
}

JavaScript / jQuery：在* img.onload命令之后运行DOM命令

1 个答案: