0

我需要暂停 javascript 的执行，直到 DOM 更改完成。我正在使用 jquery append 进行 DOM 更改，并使用附加图像的属性设置一些 post 变量。我已经看过类似的问题，但似乎与我想做的事情无关。这是代码：

var newImage = new Image();
newImage.src = *src is retrieved from previous variable*;
newImage.style.display = "none";
$('body').append(newImage);


var postData = {
    height: $('img:last')[0].height,
    width: $('img:last')[0].width
};

在某些情况下，追加会完成，我会得到正确的高度和宽度值，但大多数时候 DOM 还没有完成，我只是得到高度和宽度的 0。如何让 javascript 等待 DOM 完成其更改？我尝试过使用 jQuery .ready，但我似乎无法正确处理。

4

3 回答 3

2

您需要onload在对象上放置一个处理程序newImage，然后从该处理程序启动其余代码，例如：

var newImage = new Image();
newImage.style.display = "none";
newImage.onload = function(ev) {
     // put the loaded image in the DOM
     $('body').append(this);

     // extract its properties
     var postData = {
        height: this.height,
        width: this.width
     }

     // do stuff with postData here
     // ...
};
newImage.src = *src is retrieved from previous variable*;
于 2012-03-14T17:06:50.543 回答
1

在这种特定情况下，您似乎只想知道图像何时加载，然后在此时执行您的 javascript。您可以使用 onload 事件（纯 javascript）或.load()（jQuery）来做到这一点。

var postData = {};
var newImage = new Image();
newImage.style.display = "none";
newImage.onload = function() {
    postData.height = this.height;
    postData.width = this.width;
    // perhaps call some other function here that uses postData
};
newImage.src = *src is retrieved from previous variable*;
$('body').append(newImage);

.onload必须在设置值之前设置处理程序，否则在.src某些情况下您可能会错过加载事件。

于 2012-03-14T17:06:35.070 回答
0

您可以在页面中运行代码，而不是使用在页面中所有 html 可用但未加载图像时触发的 jQuery 就绪事件

  $(window).load(function(){
       /* images now loaded ,run image based code*/
   })

这将需要更长的时间才能触发，因此您可能会为与图像无关的元素/事件准备好运行的代码

于 2012-03-14T17:16:23.727 回答