Предварительная загрузка изображей с progress bar'ом
Если изображения на странице занимают достаточно большой объем, можно позаботиться об их предварительной загрузке, дабы dial-up пользователи не видели постепенного заполнения.
Для этого нам потребуется разделить страницу на две части: одна с progress bar'ом, другая с основным содержанием. Это сделаем с помощью div'ов. JavaScript код предварительной загрузки выглядит так:
var lengthPBar = 200;
var heightPBar = 20;
var yourImages = new Array("img/ajax.png","img/javascript.png","img/php.png","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 и содержимое по разным страницам.
Рекомендуем почитать
