Предварительная загрузка изображей с progress bar’ом

Если изображения на странице занимают достаточно большой объем, можно позаботиться об их предварительной загрузке, дабы dial-up пользователи не видели постепенного заполнения


загрузка…

Для этого нам потребуется разделить страницу на две части: одна с progress bar’ом, другая с основным содержанием. Это сделаем с помощью div’ов. JavaScript код предварительной загрузки выглядит так:

	var lengthPBar = 200;
	var heightPBar = 20;
	var yourImages = new Array("/migration/img/ajax.png","/migration/img/javascript.png","/migration/img/php.png","/migration/img/html.png");
	var tmp = (yourImages.length<10)?10:yourImages.length;
	var preImages = new Array();
	var i;

function loadImages() {
	for (i = 0; i < yourImages.length; i++) {
		preImages[i] = new Image();
		preImages[i].src = yourImages[i];
	}
	i=0;
	checkLoad();
}

function checkLoad() {
	if(i == tmp) {
		document.getElementById("preload").style.display = "none";
		document.getElementById("afterPreload").style.display = "block";
	}
	else if(isNaN(preImages[i]) || preImages[i].complete) {
		document.getElementById("img"+i).style.background = 'gray';
		i++;
		setTimeout("checkLoad()", 100);
	}
	else setTimeout("checkLoad()", 100);
}

тело будет выглядеть примерно так:

<div id="preload">
<center><br /><br /><br /><br />
<b>загрузка...</b><br /><br />
</center>
<script type="text/javascript">
	document.write("<table width='"+lengthPBar+"'height='"+heightPBar+"' border='2'><tr>");
	for (i = 0; i < tmp; i++)
	document.write("<td id='i"+i+"' bgcolor='white'></td>");
	document.write("</tr></table>");
	loadImages();
</script>
</div>

<div id="afterPreload" style="display: none">что хотите...</div>

Оформление, естественно, можно настроить как угодно, изменяя цвета и размеры.

проблемы:

  • из-за display='none' могут возникнуть проблемы с индексацией некоторыми поисковыми роботами, поэтому если важна индексация, можно разнести progress bar и содержимое по разным страницам

12 Комментарии “Предварительная загрузка изображей с progress bar’ом

  1. Классный пример! Сайт сто пудов уже висит в закладках!!! )))

  2. то, что доктор прописал. чтоб не тыкали, панимаешь, раньше времени, а зачарованно смотрели на бегунок. накликал ваш adSense (в пределах разумного). вставил код, в комменте к коду дал ссылку на ваш сайт, поставлю еще на странице (если можно), вот имени благодетеля не нашел. хочу попросить вашего разрешения, можно ли перевести ваши заметки на английский и поставить у себя на сайте ? спасибо !

  3. спасибо,
    у кого много картинок и бар уходит за страницу — попробуйте border='0' (строка 8) — влазит ~200 (1024×768) да и десигн другой получается может кому больше подойдет.

  4. без слэшей, конечно. и чего они повылазили

  5. чет я ника кнемогу понят ка кработает этот скрип

    я так понял он загружает картинки перед просмотром, но че у меня неполучается всовляю в массив путь к картинке вы вожу картинку в последним диве и она грузится поновой.

    даж ни это главное ели даже в масиве нет картинок она чтотот пытается грузить

  6. Ещё бы работающий примерчик сюда… Сайт супер! Давно в закладках! Вот так и на таком уровне и нужно людям объяснять — респект автору!!!

  7. to Александр: а вверху на этой странице у вас пример не работает?

  8. в примере понял все кроме: if(isNaN(preImages[i]) || preImages[i].complete) что такое isNaN нашел, но не понял, как оно работает тут и совсем не понял, что такое preImages[i].complete Поясните, пожалуйста, если Вам не сложно.

  9. Первые 2 коммента накрученные, это видно по почерку написания. А так же смысл тот же… Суда по комментам написали новички.. я как программист со стажем струдом разобрался в коде, да и код так себе, а новички бы не справились… так что не надо накручивать!

  10. Очень жаль, что сайт перестал обновляться 🙁

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *