Выполнить код JavaSCript после предварительной загрузки изображения

Я пытаюсь создать какой-то код обратного вызова, который запускается после предварительного изображения.Выполнить код JavaSCript после предварительной загрузки изображения

Мой JS код выглядит следующим образом:

<script type='text/javascript'> 
d=document; 
window.onload=function() 
{ 
    if (d.images) 
    { 
     d.getElementById('preload').style.display='block'; 
     i1=new Image; 
     i1.src="http://link_to_image"; 
     d.getElementById('preload').style.display='none'; 
    } 
} 
</script>

Так в моем примере, d.getElementById('preload').style.display='none'; должна выполняться после того, как изображение полностью загружается в кэш.

Любая помощь в том, как достичь этого? Пожалуйста, только автономные решения JavaScript без требований к библиотеке/плагину.

источник

2010-02-04 EarthMind

Я только что узнал, что 'setInterval (" если (i1 .complete) {...} ", 500)' является хорошим решением. Редактировать: Но не так хорошо, как предлагаемые ниже решения. – EarthMind

Да, вам следует избегать строкового аргумента 'setInterval' /' setTimeout'; передайте 'function() {...}' вместо этого в предпочтении. Также нет атрибута 'complete', только' readyState' (и это нестандартно, поэтому 'onload' по-прежнему лучше). Кроме того, вы, вероятно, можете потерять 'if (document.images)' test, поскольку последний браузер не поддерживал это Netscape 2! :-) – bobince

Я не уверен, насколько надежен событие изображение onload во всех браузерах, так что я бы проверить это очень осторожно:

var i1 = new Image(); 

i1.onload = function() { 
    d.getElementById('preload').style.display = "none"; 
}; 

i1.src = "http://link_to_image";

источник

2010-02-04 15:01:32

Посмотрите на эту статью, я думаю, что это поможет: link text

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

источник

2010-02-04 14:56:42 MoJo2600

Это 'onload', а не' onLoad'. –

Использовать onload в самом теге изображения.

<img src="http://link_to_image" onload="alert('IMG LOADED')" />

источник

2010-02-04 15:00:40 Ben

Выполнить код JavaSCript после предварительной загрузки изображения

ответ

Смежные вопросы