gif лоадера, перед показом картинки
Вот еще вопрос, по идее, для знатоков, совсем несложный.
В хэдере имеется довольно большая картинка. Требуется выводить гифку, пока картинка подгружается. Реализовал криво, но было бы здорово, если б работало оно как надо.. <div class="ImgWrap"><img class="hdd" style="visibility:hidden" src="img/head_slide.png" onload= "this.style.visibility="visible"; /></div> Код:
div.ImgWrap{ Заранее спасибо. |
засуньте гиф в в ваш div.ImgWrap, расположите её там красивенько по центру, а по событию onload основной картинки сделайте гифке style.display = none;
|
Цитата:
|
Т.е. вот сейчас она там фоном дива самого, а вы предлагаете утрать фон и внутрь дива как картинку вставить, правильно я понял? (это я о гиф)
<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();" /> Тоже не исчез гиф) |
Цитата:
|
Цитата:
И z-index у тебя дважды назначен - убери лишний. |
Бесят меня эти лоадеры. Если картинка такая большая - я хочу смотреть как она загружается, а не на дуратскую крутящуюся хрень. =\
|
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, время: 01:23. |