Всем привет!
Хочу реализовать предварительную, не заметную для пользователя, загрузку изображений.
Размер изображений 300x500px.
Написал слайдер новинок для главной страницы интернет магазина.
Решил с помощью JS сделать так, чтобы изображения в дивы (кроме первых 3х)
подставлялись при загрузке страницы, что бы уменьшить время загрузки изображений.
Имена изображений это id дивов.
Уменьшит ли это время загрузки картинок, или нет?
Кто, что скажет?
CODE ( html):
скопировать код в буфер обмена
<ul> <li> <ul> <li><div class="divImg"><img src="/images_products/img1.jpg" /></div></li> <li><div class="divImg"><img src="/images_products/img2.jpg" /></div></li> <li><div class="divImg"><img src="/images_products/img3.jpg" /></div></li> </ul> </li> <li> <ul> <li><div class="divImg" id="img4.jpg"></div></li> <li><div class="divImg" id="img5.jpg"></div></li> <li><div class="divImg" id="img6.jpg"></div></li> </ul> </li> <li> <ul> <li><div class="divImg" id="img7.jpg"></div></li> <li><div class="divImg" id="img8.jpg"></div></li> <li><div class="divImg" id="img9.jpg"></div></li> </ul> </li> <li> <ul> <li><div class="divImg" id="img10.jpg"></div></li> <li><div class="divImg" id="img11.jpg"></div></li> <li><div class="divImg" id="img12.jpg"></div></li> </ul> </li> </ul>
CODE ( javascript):
скопировать код в буфер обмена
var divImg = $('UL .divImg'); var path = '/images_products/'; var images = []; divImg.each(function(e){ if(e > 2){ images[e] = path+''+this.id; } }); function preload_img(imgPathArr){ var preloadArray = new Array(); for (var i = 3; i < imgPathArr.length; i++){ preloadArray[i] = new Image(); preloadArray[i].src = imgPathArr[i]; } return preloadArray; } var imgs = preload_img(images); for(var i = 3; i < imgs.length; i++){ divImg.eq(i).html('<img src="'+imgs[i].src+'" width="300">'); }
(Отредактировано автором: 31 Января, 2012 - 12:02:39)
|
Главная
Помощь
Поиск
Пользователи
Форумы портала PHP.SU » Клиентская разработка » JavaScript & VBScript (Модератор: armancho7777777)
Без описания
