Вход

Просмотр полной версии : Как сделать фоновую загрузку изображений?


latter-day
26.10.2010, 03:42
На странице сайта: http://m2project.ru/private/benilux.html есть простая листалка фото. Вот её код:

$(document).ready(function() {
$(".slider_box img:first-child").addClass('last');
$(".slide").click(function() {
$(this).fadeOut('normal', function() {

if ($(this).hasClass('last')) {
$(".slide", $(this).parent()).css('z-index', 20);
}
else {
$(this).css('z-index', 19)
}

$(this).show();
});
});
});


Кусок из html:

<div class="slider_box">
<img class="slide" src="http://www.m2project.ru/pic/private/700/10_benilux.jpg" alt="" />
<img class="slide" src="http://www.m2project.ru/pic/private/700/09_benilux.jpg" alt="" />
<img class="slide" src="http://www.m2project.ru/pic/private/700/08_benilux.jpg" alt="" />
<img class="slide" src="http://www.m2project.ru/pic/private/700/07_benilux.jpg" alt="" />
<img class="slide" src="http://www.m2project.ru/pic/private/700/06_benilux.jpg" alt="" />
<img class="slide" src="http://www.m2project.ru/pic/private/700/05_benilux.jpg" alt="" />
<img class="slide" src="http://www.m2project.ru/pic/private/700/04_benilux.jpg" alt="" />
<img class="slide" src="http://www.m2project.ru/pic/private/700/03_benilux.jpg" alt="" />
<img class="slide" src="http://www.m2project.ru/pic/private/700/02_benilux.jpg" alt="" />
<img class="slide" src="http://www.m2project.ru/pic/private/700/01_benilux.jpg" alt="" />
</div>


Можно ли как-то сделать так, чтобы картинки подгружались незаменто?
Проблема в том, что при открытии данной страницы видна загрузка этих картинок (быстрое мелькание).

Gvozd
26.10.2010, 08:51
добавьте контейнеру .slider_box еще один класс, с dicplay:none, или аналогом, чтобы картинки не отображались
по событию window.onload, либо по завершении всех событий Onload картинок, снимите этот лишний класс.

latter-day
26.10.2010, 08:58
Было бы классно, если б и с кодом помогли. Я яву, можно сказать, только начал осваивать. Пока вот готовые скрипты осваиваю)

DooMer
26.10.2010, 10:38
latter-day,
если изучаете
тут (http://www.google.com.ua/search?sourceid=chrome&ie=UTF-8&q=%D0%BE%D1%82%D0%BB%D0%B8%D1%87%D0%B8%D0%B5+javas cript+%D0%BE%D1%82+java) посмотрите для начала

latter-day
26.10.2010, 10:46
Я про JS)

monolithed
26.10.2010, 11:07
Можно ли как-то сделать так, чтобы картинки подгружались незаменто?
Проблема в том, что при открытии данной страницы видна загрузка этих картинок (быстрое мелькание).


используйте только один элемент IMG, а пути к файлам берите из массива

vladlen
26.10.2010, 15:58
Gvozd, помоему при display:none картинки не грузяться. Хотя мож я и не прав.
Я бы выделил контейнер 0 высоты и туда их грузил, а потом бы менял ветви в DOM. Так точно работать будет
monolithed, а так придется еще и кэширование делать, чтоб все плавно робило.