Функция, вызываемая в window.onload, не распознает элемент - PullRequest
Новая
       21

Функция, вызываемая в window.onload, не распознает элемент

0 голосов
/ 11 октября 2011

Я немного запутался здесь.Я думал, что функция, указанная в window.onload, не выполнялась до загрузки страницы.Тем не менее, я получаю ошибку в приведенном ниже коде (вот версия jsfiddle ): 

<script>
    function updateImage(url){     
        document.getElementById("foo").src = url;
    }    
    window.onload = updateImage("http://dummyimage.com/100x100/000/fff.png&text=qux");
</script>

<img id="foo" alt="" src="http://dummyimage.com/100x100/000/fff.png&text=bar" />

Это дает мне: 

Error: document.getElementById("foo") is null

При перемещении изображения вышескрипт все работает хорошо.

Ответы [ 3 ]

5 голосов
/ 11 октября 2011

window.onload ожидается, что это функция, которую она будет вызывать при загрузке страницы. Но то, что вы ему присвоили, не является функцией. Вы присвоили 

updateImage("http://dummyimage.com/100x100/000/fff.png&text=qux");

, который немедленно выполняет функцию updateImage, и поскольку у вас нет оператора return в теле updateImage, возвращаемое значение равно undefined. Следовательно, в конце window.onload имеет значение undefined.

Решением было бы изменить этот бит кода на: 

window.onload = function(){
    updateImage("http://dummyimage.com/100x100/000/fff.png&text=qux");
}

Это заставит его вызывать функцию после загрузки окна и делать то, что вы ожидаете.

0 голосов
/ 11 октября 2011

Вы можете использовать триггер, который проверит, загружен ли элемент. 

<script>

    function updateImage(url){     
        document.getElementById("foo").src = url;
    }

    function initOnLoad(sElementName) {
        var oElement = (sElementName == "body") ? document[sElementName] : document.getElementById(sElementName); 
        if(oElement != null && typeof(oElement) != "undefined") { 
            updateImage("http://dummyimage.com/100x100/000/fff.png&text=qux");
        } 
        else { 
            setTimeout(function() { 
                initOnLoad(sElementName); 
            }, 0); 
        } 
    }

    initOnLoad('body');
</script>

<img id="foo" alt="" src="http://dummyimage.com/100x100/000/fff.png&text=bar" />
0 голосов
/ 11 октября 2011

У вас есть ошибка в вашем коде.

window.onload = updateImage("...");

Вы не назначаете обработчик функции для окна загрузки.Вы назначаете RESULT функции updateImage .Который выполняется непосредственно перед тем, как изображение загружается или даже добавляется в DOM.Чтобы назначить обработчик функции, вам необходимо: 

window.onload = updateImage;

или 

window.onload = function(){
  updateImage("http://dummyimage.com/100x100/000/fff.png&text=qux");
}

или с помощью jQuery 

$(document).ready(function(){
  updateImage("http://dummyimage.com/100x100/000/fff.png&text=qux"); 
});
...