Как передать элемент для добавления изображения в функцию image.onload () - PullRequest
Новая
       12

Как передать элемент для добавления изображения в функцию image.onload ()

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

Я пишу библиотеку, которая создает несколько элементов внутри элемента-оболочки и хранит все это и его функции внутри объекта JavaScript. Я пытаюсь избежать идентификаторов, так как может быть несколько экземпляров этого объекта на странице. У меня есть функция, позволяющая пользователю изменять некоторые элементы, и мне нужна помощь, чтобы выяснить, как добавить изображение.

Вот функция: 

foo.prototype.rebrand = function(line1, line2, imgUrl){
    this.branding.childNodes[1].innerHTML = line1;
    this.branding.childNodes[2].innerHTML = line2;
    var brandImage = document.createElement('img');
    brandImage.onload = function(){
        this.branding.childNodes[0].appendChild(brandImage);
                    //this won't work
    }
    brandImage.src = imgUrl;
}

Вы бы позвонили foo.rebrand('hello', 'world', 'example.png')

К сожалению, внутри функции .onload, this будет ссылаться на сам элемент изображения. Итак, как я могу передать this.branding.childNodes[0] в изображение при загрузке?

Если я напишу функцию так: 

            brandImage.onload = function(anything){
        this.branding.childNodes[0].appendChild(brandImage);
                    //this won't work
    }

, тогда anything будет просто ссылкой на событие onload.

Изменить, чтобы добавить jsFiddle: http://jsfiddle.net/KtJd6/

1 Ответ

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

Вам нужно изменить способ обращения к определенным элементам для получения элементов, а не дочерних узлов. Это сделает его намного более надежным. И когда вы это сделаете, вам также не понадобится ссылка this в обработчике onload. 

foo.prototype.rebrand = function(line1, line2, imgUrl){
    var brandImage = document.createElement('img');

    // find child divs
    var divs = this.branding.getElementsByTagName("div");
    divs[0].innerHTML = line1;
    divs[1].innerHTML = line2;

    brandImage.onload = function(){
        divs[0].appendChild(brandImage);
    };
    brandImage.src = imgUrl;
};

Обратите внимание, что я получаю элементы с getElementsByTagName() и НЕ ссылаюсь на прямые childNode индексы. Это делает его нечувствительным к расположению текстовых узлов и является гораздо более надежным способом ссылки на элементы, на которые вы хотите нацелиться и изменить.

Вы можете увидеть, как это работает здесь: http://jsfiddle.net/jfriend00/kkXCg/

...