Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   gif лоадера, перед показом картинки (https://javascript.ru/forum/dom-window/36742-gif-loadera-pered-pokazom-kartinki.html)

Pothead 26.03.2013 07:13

gif лоадера, перед показом картинки
 
Вот еще вопрос, по идее, для знатоков, совсем несложный.

В хэдере имеется довольно большая картинка. Требуется выводить гифку, пока картинка подгружается.

Реализовал криво, но было бы здорово, если б работало оно как надо..

<div class="ImgWrap"><img class="hdd" style="visibility:hidden" src="img/head_slide.png" onload=
    "this.style.visibility="visible"; /></div>


Код:

div.ImgWrap{
display:inline-block;
background-color:transparent;
padding:0;margin:0;
background-image:url(img/loading.gif);
background-position:center center;
background-repeat:no-repeat;
z-index:1;
z-index:100;
transition: all 35s;
-moz-transition: all 35s; /* Firefox 4 */
-webkit-transition: all 35s; /* Safari and Chrome */
-o-transition: all 35s; /* Opera */
}

Направьте пожалуйста в нужное русло, как это реализовать? :)

Заранее спасибо.

zilker 26.03.2013 11:19

засуньте гиф в в ваш div.ImgWrap, расположите её там красивенько по центру, а по событию onload основной картинки сделайте гифке style.display = none;

danik.js 26.03.2013 12:32

Цитата:

Сообщение от Pothead
Реализовал криво, но было бы здорово, если б работало оно как надо..

Почему криво? С виду должно работать же. Хотя onload вроде бы не гарантирован.

Pothead 26.03.2013 12:34

Т.е. вот сейчас она там фоном дива самого, а вы предлагаете утрать фон и внутрь дива как картинку вставить, правильно я понял? (это я о гиф)

<img class="hdd" src="img/head_slide.png" onload=
    "$("div.imgWrap").style.display="none";" />

Вроде того? если да, то можете по синтаксису поправить если что не так.. (ну и собсна не сработало, возможно изза синтаксиса)

Еще попробовал так:

function loadPic() {
    $("div.imgWrap").css("display", "none");
   }

<img class="hdd" src="img/head_slide.png" onload=
    "loadPic();" />


Тоже не исчез гиф)

Pothead 26.03.2013 12:36

Цитата:

Сообщение от danik.js (Сообщение 242691)
Почему криво? С виду должно работать же. Хотя onload вроде бы не гарантирован.

Ну, как минимум, отображается не ахти)) Ощущение что одновременная подгрузка изображений идет. +ко всему нужно обеспечить плавную смену гиф и главной картинки, собственно поэтому понапихивал транзишн )

danik.js 26.03.2013 12:41

Цитата:

Сообщение от Pothead
Ощущение что одновременная подгрузка изображений идет

Вставь гифку через data:uri. И меняй не visibility : hidden => visible, а opacity : 0 => 1
И z-index у тебя дважды назначен - убери лишний.

Aetae 26.03.2013 13:04

Бесят меня эти лоадеры. Если картинка такая большая - я хочу смотреть как она загружается, а не на дуратскую крутящуюся хрень. =\

Pothead 26.03.2013 15:02

2Aetae:
Ой, и не говорите. Я сам далеко не в восторге, но в моем случае только так и никак иначе )

2danik.js

Спасибо за наводку на прозрачность, что-то я затупил и как-то в голову не пришло :)

Реализовал так:

img.hdd{margin-top:-70px; z-index:100;
transition: all 5s;
-moz-transition: all 5s; /* Firefox 4 */
-webkit-transition: all 5s; /* Safari and Chrome */
-o-transition: all 5s; /* Opera */}
div.ImgWrap{
display:inline-block;
background-color:transparent;
padding:0;margin:0;
background-image:url(img/loading.gif);
background-position:center center;
background-repeat:no-repeat;
z-index:99;
transition: all 5s;
-moz-transition: all 5s; /* Firefox 4 */
-webkit-transition: all 5s; /* Safari and Chrome */
-o-transition: all 5s; /* Opera */
}


<div class="ImgWrap"><img class="hdd" style="opacity:0" src="img/head_slide.png" onload="this.style.opacity=1 " /></div>


Отображает так, как и требовалось, ура! :)


Часовой пояс GMT +3, время: 02:01.