Как потушить контент, только когда он готов в Jquery?

Question

Я видел примеры для load() а также ready(), но они, кажется, всегда применяются к окну или телу документа, или к div, или к img, или к чему-то в этом роде.

у меня есть hover() функция, и когда вы наводите курсор на нее, она использует fadeIn() раскрыть это. Проблема в том, что изображения внутри div еще не загружены, так что в конечном итоге они все равно появляются. Мне нужен код, который позволит изображению исчезать только тогда, когда его содержимое полностью загружено. Когда я просто подключаю другие селекторы, как показано ниже, это не работает

$(this).next(".menuPopup").ready(function () { //or load(), neither work
  fadeTo(300, 1);
});

РЕДАКТИРОВАТЬ: Соответствующий код

     $( '.leftMenuProductButton' ).hover (
            function () {

                                $(this).next(".menuPopup").stop().css("opacity", 1).fadeIn('slow');


            },
            function () {



                $(this).next(".menuPopup").stop().hide();


    });

HTML

<div class="leftMenuProductButton"> Product 1</div>
                                <div id="raceramps56" class="menuPopup"><IMG SRC="myimage.jpeg"> </div>

Answer 1

Вы, вероятно, должны пойти с цепочкой анимаций:

$(this).next(".menuPopup").fadeIn(300, function() {
    $(this).children('.inside_image').css(
        'opacity':'0',
        'display':'show'
    );
    $(this).children('.inside_image').animate({
        opacity: '1'
    }, 300);
});

Я делал что-то подобное раньше, и это работало довольно хорошо. Я думаю, что многие лайтбоксы делают это.

Answer 2

Функция

$(window).load()

это, вероятно, то, что вы ищете.

Смотрите: ТАК сообщение

Answer 3

Вы можете использовать window.onLoad, который не срабатывает, пока все не загружено.