Плавно появляющаяся загруженная картинка

EggMan · July 21, 2011

Ребята, подскажите, пожалуйста, как сделать так, чтобы картинка на странице не появлялась по мере загрузки, а плавно (можно не плавно) появлялась уже в загруженном виде. И мне нужно сделать так, чтобы это случалось не при наведении на неё мышкой, а сразу после загрузки оной.

Edited July 21, 2011 by EggMan

Golgi · July 21, 2011

img.onload(function() {img.show()})

на jQuery.

EggMan · July 21, 2011

img.onload(function() {img.show()})
на jQuery.

Ой-ой-ой, прошу поподробнее, ибо не связывался к ДжейКвери... Спасибо.

Golgi · July 21, 2011

ну тут можно и на чисто JS

Картинка с id img и изначально display: none


var img = getElementById('img');
img.onload = function() 
   {
     img.style.display = 'block';
    }

З,Ы. где мог допустить корявость, но вроде так. Принцип по крайней мере точно

EggMan · July 21, 2011

ну тут можно и на чисто JS
Картинка с id img и изначально display: none
var img = getElementById('img');
img.onload = function() 
   {
     img.style.display = 'block';
    }
З,Ы. где мог допустить корявость, но вроде так. Принцип по крайней мере точно

Так, создал стиль #img с вашим параметром (display: none), прописал id="img" к тэгу <img>, вставил ваш скрипт в <head>...

Но что-то не работает-таки.

И картинка, что и следовало от параметра none, не показывается более.

Edited July 21, 2011 by EggMan

Golgi · July 21, 2011

консоль ошибок, что-нибудь выдает?

EggMan · July 21, 2011

консоль ошибок, что-нибудь выдает?

Охо-хо, нет, не показывает ошибок. Заново пробую и с ДжейКвери, и с обычным Джаваскриптом.

Может, получится наконец-то

А то я ни бельмеса в скриптах.

Golgi · July 21, 2011

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

Возможно нужно window.onload = function()

попробуйте.

EggMan · July 21, 2011

ах, да, возможно это только потому что картинка загружается позже чем выполняется скрипт.
Возможно нужно window.onload = function()
попробуйте.

Прошу прощения, это относится к простому JS или к JQ?

И куда нужно "вставлять" то, что вы написали?

Я действительно критически мало знаю о скриптах.

Оп, понял, куда вставлять.

Edited July 21, 2011 by EggMan

Golgi · July 21, 2011

http://ruseller.com/shporgalki/jquery/events/load.html

может поможет вам в jQuery

EggMan · July 21, 2011

Спасибо, пробую.

Ребята, что-то никак...

Не поможете написать этот злобный jQuery-код?

Edited July 21, 2011 by EggMan

Int · July 21, 2011

window.addEventListener('load',function() {
var img = document.getElementById('img');
img.onload = function() {img.style.display = 'block';}
},false);

А как-нибудь так? Только IE не в курсе, что такое addEventListener, у него attachEvent вроде, и в параметре 'onload'

EggMan · July 21, 2011

window.addEventListener('load',function() {
var img = document.getElementById('img');
img.onload = function() {img.style.display = 'block';}
},false);
А как-нибудь так? Только IE не в курсе, что такое addEventListener, у него attachEvent вроде, и в параметре 'onload'

Int, вот мой сайт с черновиком (нет анимаций флеш-меню, пробная галерея и т.д.): http://eggman.500mb.net/galery.html — посмотрите, что не так?

Огромное спасибо!

mishka · July 21, 2011

Оно то у вас может и работает без ошибок, но не так как вам нужно.

show() - резко покажет картинку, тоесть она загрузилась и резко показалась. А так как вы, скорее всего, тестируете локально, то и эфекта 0. Всеравно что и без картинки.

http://jsfiddle.net/CtMrP/1/

EggMan · July 21, 2011

Оно то у вас может и работает без ошибок, но не так как вам нужно.
show() - резко покажет картинку, тоесть она загрузилась и резко показалась. А так как вы, скорее всего, тестируете локально, то и эфекта 0. Всеравно что и без картинки.
http://jsfiddle.net/CtMrP/1/

Нет, конечно, не локально: каждый вариант отгружаю на сайт, чищу кэш, обновляю страницу — смотрю. Но не работает-таки.

Я понимаю, что, если смотреть документ локально, то и грузиться, соответственно, нечему.

Спасибо за полный код, который я так долго искал!

Edited July 21, 2011 by EggMan

EggMan · July 23, 2011

Нашёл ещё один вариант: http://ruseller.com/lessons.php?rub=28&id=474.

Sign In

Плавно появляющаяся загруженная картинка

Question

Link to comment

Share on other sites

15 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information