javascript crossbrowser new Изображение()

Question

Что не так с этой функцией? Он работает в Opera и Firefox, но doens't работу над Safari под Windows,

function getImage(url) {   
    var image = document.createElement('img'); // new Image(1, 1); 
    image.src = url; 
    image.onload = function() {}; 
} 

при попытке GetImage ('http://site.com/someservlet.gif') Это изображение не загружается (т.к. someservlet.gif регистрирует все запросы) It работает в Opera и Firefox, но не в Safari. Я попробовал «новое изображение()» и «document.createElement ('img')» - тот же результат.

========== UPDATE: Функция работает хорошо, когда она вызывается непосредственно, проблема начинается, когда он вызывается из обработчика событий

<a href="http://google.com/" 
onclick="getImage('http://127.0.0.1/pic/img.gif?rnd=' + Math.random());">google</a> 

<a href="#" 
onclick="getImage('http://127.0.0.1/pic/img.gif?rnd=' + Math.random());">local</a> 

<script type="text/javascript"> 
function getImage(url) { 
    var image = document.createElement('img'); 
    alert('1'); 
    image.onload = function() {alert(image.src);}; 
    image.src = url; 
    alert('2'); 
} 
</script> 

«местный» ссылка хорошо работает в Firefox, Opera и Safari (но Safari показывает alert1, alert2, а затем по какой-то причине предупреждает «src», в то время как другие браузеры показывают alert1, alertSrc, alert2)

ссылка «google» Opera, Firefox - работает хорошо (alert1, alertSrc, alert2), но Safari не показывает - show alertSrc. В Safari вы видите alert1, alert2 и все. Сервлет «/pic/img.gif» не получает запрос, когда кто-то нажимает ссылку «google» из Safari.

В чем проблема, как ее решить?

Спасибо.

Answer 1

Мое первое впечатление, что вы наткнулись на какой-то оптимизации кода в браузерах, которые откладывает загрузку изображений, которые не отображаются. До сих пор:

Safari 4.0.2 (530.19.1):

• работает для меня, как описано (как местного, Google, и когда я изменил событие наведения курсора мыши)
• упорядочения оповещения является alert1, alertsrc, alert2

Firefox Nightly (3.5.3pre, 20090805):

• работ, как описано. Забавно, потому что сначала это не сработало. Попробуйте загрузить изображение в кеш, посмотрите, влияет ли оно на тест.
• упорядочение предупреждений является alert1, а затем alertsrc и alert2 одновременно (переместить диалоговое окно, чтобы увидеть оба)

Google Chrome (2.0.172.39):

• работает как в Safari, хотя Mouseover кажется стрелять слишком много событий
• упорядочение предупреждений является alert1, alert2, alertsrc

Internet Explorer (7.0.6001.18000)

• работает как описано (как локальный, так и google, а также при изменении мыши)
• заказ предупреждений alert1, warnrc, alert2

Имейте ввиду, что я изменил местоположение изображения на http://www.google.com.ar/images/nav_logo6.png, так как у меня нет скрипта случайного изображения, работающего прямо сейчас. Основываясь на этом, я предлагаю запустить тест самостоятельно с разными изображениями и пробовать несуществующие изображения, изображения в кеше, изображения не в вашем кеше.

Причина, по которой предупреждения не обязательно в порядке, заключается в том, что разные браузеры загружают изображения в разных порядках, а alertrc происходит только после загрузки изображения. Хорошая проверка, если изображение загружено или нет, если ширина равна 0.

Answer 2

попробуйте этот пример в IE и Safary и отлично работает.

function getImage(url) {   
    var image = document.createElement('img'); // new Image(1, 1); 
    image.src = url; 
    image.onload = function() {alert('ok');}; 
} 
getImage("http://www.google.com.ar/images/nav_logo6.png"); 

Answer 3

Единственный способ, которым я не мог заставить его работать в IE, чтобы использовать новое изображение() вместо document.createElement. Это поправимо, перемещая image.src к после функции OnLoad:

image.onload = function() {} 
image.src = url; 

Answer 4

Я думаю, что это проблема с кешем.
Когда вы говорите image.src = url; javascript немедленно отправляется на получение изображения, и если изображение кэшируется, браузер будет использовать кешированный и запускает onload, и теперь вы говорите image.onload = function() {};, но onload уже запущен, поэтому function() никогда не будет называется.

В любом случае, это все только мои предположения, я не уверен, что я прав. Однако, если я прав, вы должны исправить это, переместив image.src = url; под image.onload = function() {};