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 Explorers) будут извлекать изображение из кеша, если оно доступно, как только атрибут src установлен.

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

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

Answer 2

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

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

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

Answer 3

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

Answer 4

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

Не меняющийся src не вызывает последовательность загрузки.

Answer 5

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 не будет вызвана.