Question

我需要暂停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。但我似乎无法正确使用它。

Answer 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值之前设置，否则在某些情况下可能会错过加载事件。

Answer 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*;

Answer 3

您可以在

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

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

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

延迟javascript执行，直到DOM更改完成

3 个答案: