Ускорения загрузки графики, по средствам JavaScript
Всем известно, что графические элементы (картинки) на сайте, используются не только для украшения, но также в качестве так сказать информации для посетителей. Это будет очень полезно для сайтов часто использующие иллюстрации: каталоги, фотогалереи, да и просто на сайте для красоты. Для ускорения загрузки страницы сайта в браузере мы будем использовать один интересный прием: сначала будет загружено одно изображение и предложено выбрать из списка следующие. Посетитель просматривает поочередно все картинки, которые в это время загружаются в кэш-память браузера предварительно. В результате посетителя не раздражает тормознутое появление картинок, что не вызывает отрицательных эмоций. Я не буду Вас затруднять всякими терминологиями, а просто рассмотрим в качестве примера HTML-документ, который, я надеюсь, Вас заинтересует.
А это ожидаемый результат у Вас на сайте
 |
HTML - код документа
HTML - код документа, просто скопируйте и вставьте себе на страничку. Впоследствии доработайте код самостоятельно, подставив свои картинки и URL – адреса их.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><title>Ускорения загрузки графики, по средствам JavaScript</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<script language="JavaScript">
var imgfile=new Array()
imgfile[0]="http://site-pro-site.ru/images/maifoto/1.jpg" //названия картинок
imgfile[1]="http://site-pro-site.ru/images/maifoto/2.jpg"
imgfile[2]="http://site-pro-site.ru/images/maifoto/3.jpg"
imgfile[3]="http://site-pro-site.ru/images/maifoto/4.jpg"
imgfile[4]="http://site-pro-site.ru/images/maifoto/5.jpg"var imgName=new Array() //названия картинок
imgName[0]="Я слежу за тобой"
imgName[1]="Два сердца"
imgName[2]="Самая Лучшая Девушка ! ! !"
imgName[3]="Окно"
imgName[4]="Крепкий сон"/*Создание объектов изображений с последующей загрузкой изображений в кэш*/
var imgObj=new Array() //объектоы изображений
for(i=0; i<imgfile.length; i++){
imgObj[i]=new Image(640,460) //размер изображения
imgObj[i].src=imgfile[i] /*загрузка картинки в память без изображения*/
}
function imgshow(list){ //картинка при выборе списка
var a=list.options[list.selectedIndex].value //номер картинки
document.all.img0.src=eval("imgObj["+a+"].src")
}
</script>
</head>
<body><br>
<div align="center"><table width="90%">
<tr>
<td><div align="center"><img id="img0"src="images/maifoto/1.jpg" width="620" height="440"> </div></td>
</tr>
<tr>
<td><div align="center"><script language="JavaScript"> /*список картинок*/
var clist="<select onchange='imgshow(this)'>"
for(i=0; i<imgfile.length;i++){
clist+="<option value="+i+">"+imgName[i]
}
clist+="</select>"
document.write(clist) //конец списка картинок
</script><!--s_links-->Выберете <a href="http://site-pro-site.ru" target="_blank">из списка</a> фото <!--/s_links--></div></td>
</tr>
</table>
<br></body></html>
