gif лоадера, перед показом картинки

[Pothead]

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

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

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

<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]

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

[danik.js]

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

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

[Pothead]

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

<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]

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

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

[danik.js]

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

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

[Aetae]

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

[Pothead]

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>

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