показать класс после загрузки изображения

[malkoff]

Всем привет
Есть задача. Загружается анимированая гифка (порядка 600кб).
Сверху на нее при помощи position: absolute добавляются кнопки (класс .button)
Нужно сделать так чтобы .button появился плавно после полной загрузки анимированой гифки

пробовал так

$(document).ready(function() {

 $(".buttons").css("display", "none");
   $(".buttons").fadeIn(2500);
});

но кнопки появляются раньше чем догрузится гифка
в чем дело?

спасибо заранее

[ksa]

в чем дело?

Событие redy наступает раньше чем загрузится твой "гифка"... Как вариант используй событие load самой "гифки"...

[malkoff]

спасибо, а можно кусок кода, как это можно реализовать?

[MadGest]

$('#image').attr('src', 'image.jpg').load(function() {  
    alert('Картинка загружена');  
});

attr можно убрать, это так для наглядности.

[trikadin]

MadGest, плохой вариант. Теоретически, возможна ситуация, когда картинка загрузится (и, соответственно, обработчик load выполнится) раньше, чем вы этот пресловутый обработчик повесите (например, такие вещи на ура происходят, если картинка в кэше).

Так что так:

$('#image').load(function() { 
    alert('Картинка загружена'); 
}).attr('src', 'image.jpg');