Preload: предварительная загрузка изображений

Полезные скрипты
Ответить
Аватара пользователя
mihas
Администратор
Сообщения: 1368
Зарегистрирован: 18 авг 2004, 16:58
Откуда: Москва
Контактная информация:

Preload: предварительная загрузка изображений

Сообщение mihas »

Иногда бывает нужно загрузить какой-то элемент дизайна, например картинки, пораньше, чтобы страница сразу начинала их отображать, не дожидаясь полной загрузки всего содержимого страницы. Так например я подгружаю вначале картинку прелоадера на страницу со скриптом, который 2-3 секунды думает, прежде чем выдать результат. Так пока скрипт думает пользователю показывается картинка прелоадера. Реализована такая предзагрузка здесь например. В Adobe Dreamweaver есть специальный скрипт предварительной загрузки, который встраивается в страницу из окна например Tag Inspector / Behaviors / + / Preload Images. Разыскать в общем сложно, проще самому внести в код несколько строчек этого скрипта. Вот например так мы подгрузим нужные изображения еще до загрузки тела страницы: выше тега <body> впишем следующий код:

Код: Выделить всё

<script type="text/javascript">
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
MM_preloadImages('11.gif','temp/22.png');
</script>
Изображения 11.gif и 22.png и так далее перечисляются просто через запятую в одинарных кавычках при вызове функции. Если изображения нам нужны не до загрузки страницы а после загрузки страницы целиком - можно привязать вызов функции MM_preloadImages к событию onload для страницы:

Код: Выделить всё

<body onload="MM_preloadImages('11.gif','22.png');">
В моем примере необходимо именно получить изображение еще до загрузки всей страницы и выполнения всех скриптов для того, чтобы пока они грузятся и выполняются пользователь не подумал, что страница зависла, ему сразу демонстрируется загруженная в первую очередь картинка прелоадера пока все остальное некоторое время грузится и обсчитывается:

Код: Выделить всё

<div align="center" id="iqplot" style="margin: 15px auto;"></div>
<script language="javascript">
var chart_Div = document.createElement('div');
chart_Div.innerHTML = '<table width="640" height="628" border="1" cellspacing="0" cellpadding="0"><tr><td><div align="center"><img src="11.gif" width="220" height="19" /></div></td></tr></table>';
document.getElementById('iqplot').appendChild(chart_Div);
</script>
Только после этого куска кода я начинаю грузить и выполнять все остальные скрипты.
После того, как все обсчитается и картинка 11.gif на экране перестанет быть актуальна, другой скрипт в конце своей работы заменит ее на актуальное содержимое - динамическую таблицу в моем случае, удалит старый div (removeChild) и впишет новый (appendChild) на его место:

Код: Выделить всё

document.getElementById('iqplot').removeChild(document.getElementById('iqplot').getElementsByTagName('div')[0]);
var chart_Div = document.createElement('div');
chart_Div.innerHTML = '<table width="640" border="1" cellspacing="0" cellpadding="0"><tr><td>Трам-пам-пам</td></tr></table>';
document.getElementById('iqplot').appendChild(chart_Div);
Ответить

Вернуться в «JavaScript»