Как реализовать порядок загрузки изображений?

Question

[bossldv]

Здравствуйте!
Есть страница koleso.denbiz.ru/, картинки загружаются от маленьких до больших. В результате главная картинка появляется через длительный промежуток времени и непонятно о чем сайт. Подскажите, как сделать, чтобы главная картинка загрузилась первой, а потом уже все остальные?

Answer 1

[Руслан Касымов]

как вариант если есть jquery

<!-- html -->
<img src="main.png" id="mainImg">

<img src="" data-src="notmain1.png" class="notmain">
<img src="" data-src="notmain2.png" class="notmain">
<img src="" data-src="notmain3.png" class="notmain">

/*** javascript ***/
$("#mainImg").load(function() {
    $(".notmain").attr('src', function() {
        return $(this).attr("data-src");
    });
});

Comments

[bossldv]

Ничего не понял.

[Руслан Касымов]

а что тут не понятного? есть одна главная картинка с id mainImg, на которую вешается обработчик (load), который сработает как только эта картинка загрузится. В этом обработчике найдутся все не главные картинки у которых класс notmain и в атрибут src запишится путь до каринки взятый из атрибута data-src. И только после того как появится значение в атрибуте src у тэга img второстепенные картинки начнут загружаться. Таким образом пока не загрузится оснавняа картинка все остальные не будут грузиться...

Answer 2

[Юрий Лобанов]

Зачем же Вы все картинками-то сделали? 21 век на дворе.

Comments

[bossldv]

Да. вот так мне сверстали макет.

[Юрий Лобанов]

Вы заказчик? Версткой и дизайном занимались разные люди?

[bossldv]

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

[Юрий Лобанов]

@bossldv ну вот Вам вариант подсказали. Если не понятно, то происходит там вот что: у всех картинок, кроме главной, Вы убираете атрибут scr, значение которого вписываете в дата-атрибут data-scr. После того, как главная картинка загрузилась, скрипт переносит значение из дата-атрибутов в атрибут scr. Чтобы при этом разметка не ехала - советую прописать для всех изображений размеры.

Answer 3

[Krickt]

Быть может queryLoader вам поможет?
www.gayadesign.com/diy/queryloader2-preload-your-i...

p.s. в след. раз не экономьте на верстке...

Answer 4

[bossldv]

Ребята всем спасибо. На самом деле там у меня есть картинки которые непосредственно грузятся на сайт, а главная картинка это background блока div который прописан в CSS Раз уж картинки грузятся по мере того как они стоят в коде то в самом начале я кода я вставил картинку в размерами 1х1рх, теперь главная картинка грузится сразу.
Думаю что это какой то древнегреческий метод, но мне достаточно!!!