Задержать выполнение JavaScript до получения не изменений DOM

Question

Мне нужно приостановить выполнение JavaScript до тех пор, пока не будут завершены изменения DOM.Я делаю DOM изменить с jQuery Append и устанавливая некоторые переменные пост с атрибутами добавленного изображения.Я посмотрел на подобные вопросы об этом, но никто не имеет отношения к тому, что я хочу сделать.Вот код:

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 ждать домена, чтобы закончить свои изменения?Я пытался возиться с jQuery. Сочись, но я не могу получить правильно.

Answer 1

Вам необходимо поставить обработчик 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 2

В этом конкретном случае похоже, что вы просто хотите знать, когда изображение загружено, а затем выполните ваш 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 3

вместо того, чтобы использовать событие Gueta jQuery, которое триггеры, когда все HTML доступен на странице, но не загружены изображениями, вы можете запустить свой код внутри

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

.

Это займет больше времени для огня, поэтому может быть код, который вы можете работать в готовности также для элементов / событий, которые не связаны с изображениями