Javascript: загрузка изображений через Javascript

Question

Это кусок кода javascript из учебника, в котором они пытаются загрузить изображение на холст и выполнить некоторые манипуляции позже. Я опустил большую часть ненужного кода, чтобы его было проще понять.

1) Я не понимаю, почему строка, содержащая имя файла изображения, всегда помещается ниже функции imageObj.onload. Это имеет значение ? В какой момент изображение начинает загружаться?

2) Что произойдет, если я забуду указать исходный файл изображения.

<script>
            window.onload = function(){
                ....

                var imageObj = new Image();

                imageObj.onload = function(){
                    ....
                    ....
                    });

                    ....
                    ....

                };
                imageObj.src = "yoda.jpg";

            };
        </script>

Answer 1

Это несколько исторический вопрос.Порядок от .onload и .src на самом деле не имеет значения (он будет работать технически для обоих порядков), проблема в том, что некоторые браузеры (некоторые = Internet Explorer) будут извлекать изображение из кэша, если доступно, как тольков качестве атрибута src.

Именно поэтому вы всегда должны объявлять обработчик onload перед установкой src.

Если вы просто забыли установить атрибут srcПросто ничего не случится вообще.Если у вас больше нет ссылок или замыканий на этот объект, он просто соберет мусор как можно скорее.

Answer 2

window.onload = function(){
                // This is function 1 
                // This portion will execute when window has loaded completely.
                // In simple words, page has been downloaded completely.

                var imageObj = new Image();

                imageObj.onload = function(){
                    // This is function 2
                   // This portion will execute when image has loaded completely 
                    });

                    ....
                    ....

                };
                imageObj.src = "yoda.jpg";

Итак, функция 1 и функция 2 будут выполняться после этой строки imageObj.src = "yoda.jpg";

Это ответ на ваш первый вопрос. Если поместить его ниже, это не значит, что он будет выполняться после функции 2. В javascript код выполняется последовательно сверху вниз, но код внутри функций будет выполняться только при вызове этой функции.

Если вы не зададите атрибут src, изображение не будет загружено, и, таким образом, функция 2 не будет вызвана.

Answer 3

Загрузка запускается установкой свойства .src.

В (некоторых?) Старых браузерах обработчик не вызывается, если он зарегистрирован после установки свойства, особенно если изображение уже было в кеше и, следовательно, "загружено" немедленно.

Если вы забудете установить атрибут, ничего не произойдет.

Answer 4

изменение src запускает «последовательность загрузки», и из-за природы выполнения JS последовательно, вы должны зарегистрировать обработчик до загрузки изображения. 1006 *

без изменения src не будет запускать последовательность загрузки.

Answer 5

Загрузка начинается при установке атрибута src. И функция img.onload будет вызываться после успешной загрузки изображения.