и только ссылка на изображение в обратном вызове будет работать. Мой вопрос заключается в том, существуют ли спецификации, описывающие, как это должно работать.
отрим следующий (хрупкий) код JavaScript:
var img = new Image;
img.src = "data:image/png;base64,..."; // Assume valid data
// Danger(?) Attempting to use image immediately after setting src
console.log( img.width, img.height );
someCanvasContext.drawImage( img, 0, 0 );
// Danger(?) Setting onload after setting src
img.onload = function(){ console.log('I ran!'); };
Вопросы)
Должны ли ширина и высота изображения быть правильными сразу?Должен ли холст рисовать сразу?Еслиonload
обратный вызов (установленный после изменения src) будет вызван?Экспериментальные испытания
Я создалпростая тестовая страница с похожим кодом. В Safari мои первые тесты, оба, открывая HTML-страницу локально (file:///
url) и загрузив его с моего сервера, показал, что все работает: высота и ширина верны, холст работает,а также onload
также пожары.
В Firefox v3.6 (OS X) загрузка страницы после запуска браузера показывает, что высота / ширина неверна сразу после настройки,drawImage()
выходит из строя. (Theonload
однако, обработчик срабатывает.) Загрузка страницы снова, однако, показывает правильность ширины / высоты сразу после установки, иdrawImage()
работает. Похоже, что Firefox кэширует содержимое URL-адреса данных в виде изображения и сразу же получает его при использовании в том же сеансе.
В Chrome v8 (OS X) я вижу те же результаты, что и в Firefox: изображение не доступно сразу, но требуется некоторое время для асинхронной «загрузки» из URL-адреса данных.
В дополнение к экспериментальному доказательству того, что браузеры вышеупомянутые работают или не работают, я действительно хотел бы ссылки на спецификации о том, как это должно вести себя. Пока что мой гугл-фу не справился с этой задачей.
Играя Безопасно
Для тех, кто не понимает, почему вышеизложенное может быть опасно, знайте, что вы должны использовать изображения, подобные этим, чтобы быть в безопасности:
// First create/find the image
var img = new Image;
// Then, set the onload handler
img.onload = function(){
// Use the for-sure-loaded img here
};
// THEN, set the src
img.src = '...';