Задержка выполнения JavaScript до завершения изменений DOM - PullRequest
Новая
       17

Задержка выполнения JavaScript до завершения изменений DOM

0 голосов
/ 14 марта 2012

Мне нужно приостановить выполнение 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 ждать, пока DOM завершит свои изменения?Я пытался возиться с JQuery. Уже, но я не могу понять, как это правильно.

Ответы [ 3 ]

2 голосов
/ 14 марта 2012

Вам необходимо поместить обработчик 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*;
2 голосов
/ 14 марта 2012

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

0 голосов
/ 14 марта 2012

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

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

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

...