В Javascript, по какому механизму установка свойства Image src вызывает загрузку изображения?

Question

Одна из вещей, которую вы изучаете на ранних этапах при манипулировании DOM с помощью Javascript, - это следующая схема:

var img = new Image();   // Create new Image object
img.onload = function(){
  // execute drawImage statements here
}
img.src = 'myImage.png'; // Set source path

Насколько я знаю, вообще, когда вы устанавливаете свойство объекта, побочные эффекты отсутствуют. Так каков механизм запуска загрузки изображения? Это просто волшебство? Или я могу использовать аналогичный механизм для реализации класса Foo, который поддерживает параллельный шаблон?

var foo = new Foo();   // Create new object
foo.barchanged = function(){
  // execute something after side effect has completed
}
foo.bar = 'whatever'; // Assign something to 'bar' property

Я смутно осведомлен о получателях и установщиках JavaScript . Это как Image.src запускает загрузку?

Answer 1

Механизм для Image.src = ... запуска загрузки в настоящее время не определен, но WebIDL изменит это после завершения. ( 4.4.5 Атрибуты - это раздел, который говорит об этом прямо сейчас; возможно, это то, что будет в окончательной рекомендации, но я стараюсь не предсказывать будущее в этих вещах - слишком легко предсказать на скорую руку и сожаление на досуге.) Некоторые браузеры реализовали это, используя, по существу, отмеченные вами методы получения и установки (просто с помощью «родных» функций, реализованных в браузере для их поддержки, подобно тому, как, скажем, document.appendChild - это функция JS с родная "обеспеченная браузером реализация позади этого). Другие имеют совершенно иной подход к получателям и установщикам DOM, чем к определяемым пользователем получателям и установщикам. (Вот почему вы не можете использовать Object.getOwnPropertyDescriptor в бета-версиях Firefox 4 для проверки геттеров и сеттеров DOM. Это то, что мы исправим в конце концов, но, думаю, у нас закончилось время для Firefox 4).

На данный момент ответ таков: «как» не определено, но это будет в ближайшее время.

Answer 2

W3C создает спецификацию, которая описывает поведение, которому должны следовать браузеры (пользовательские агенты) для HTML, JavaScript и CSS.Большинство поставщиков браузеров реализуют язык JavaScript, чтобы он следовал этой спецификации.

Код, который вы описали выше, где определено свойство onload, реализован в собственном JavaScript, поставляемом с браузером.Каждый поставщик браузеров реализует что-то, что вполне возможно работает немного по-своему, но конечный результат, как правило, одинаков.

Вы вполне могли бы следовать этому же шаблону для своего объекта Foo.Однако я знаю, что единственный способ сделать это изначально - привязать событие onchange к элементу DOM.Свойство src в изображении является свойством элемента DOM.

Вашему классу Foo также необходимо связать значение с элементом DOM, если вы хотите воспользоваться преимуществом события onchange.Тем не менее, могут быть другие способы запуска событий при изменении свойства (в отличие от вызова метода, который может установить свойство, а также вызвать другие функции.)

Answer 3

Это похоже на установщик JavaScript, но реализовано в нативном коде. Есть много других, включая window.location и textContent

В этой документации MDC объясняется стандартный (ECMAScript 5) синтаксис получения и установки. К сожалению, кросс-браузерная поддержка еще не совсем там. Обратите внимание, что существует огромный массив ранее нестандартного синтаксиса , большая часть которого была удалена