Исчезать в оверлейном div только после загрузки всех элементов?

Question

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

ОК. Как я могу изменить приведенный ниже код, чтобы я мог гарантировать, что fadeIn запустится только после всех других действий?сделано, и все изображения в HTML были загружены?Нужно ли загружать изображения через js с обратным вызовом на каждом?Часть кода в $ (window) .load ().вместо документа готов?

В данный момент fadeIn вызывается асинхронно (я предполагаю) - иногда он исчезает .ovwrapper, когда изображение все еще загружается.ниже приведен документ, готовый в начале HTML-файла, загруженного сценарием ajax.

//Reset overlay elements
    $("#ov-image1"+bellcat).show();
    $("#ov-image2"+bellcat).hide();
    $("#ov-image3"+bellcat).hide();
    $("#ov-video"+bellcat).hide();
    $("#ovtext"+bellcat).hide();
    $("a#clicktxt").removeClass("highlight");
    $("a#clickimg1").addClass("highlight");
    $("a#clickimg2").removeClass("highlight");
    $("a#clickimg3").removeClass("highlight");
    $("a#clickvid").removeClass("highlight");
    //Fade in overlay inner wrapper
    $(".ovwrapper").fadeIn("slow");
    //Resize 1st image in relation to height of image-wrapper
    $(function(){
    var wh = $(window).height();
    var hh = $("#ovheader-wrapper"+bellcat).height();
    var nh = $("#ovfooter-wrapper"+bellcat).height();
    var ch = wh - (hh + nh);
    $("#ovslideshow"+bellcat).css("height", ch+"px");
    });

Предлагаемое решение:

Мое решение заключается в использовании jQuery-плагина onImagesLoad.Обратный вызов от этого скрывает загрузочный gif и затем исчезает в классе .ovwrapper.Бит ('видимость', 'видимый'). Hide () вызван тем, что мне нужна была видимость: скрытый, поскольку я связывался с положением и масштабом изображения до исчезновения в завершенном наложении:

$(function(){ 
            //attach onImagesLoad to the entire body 
            $('.ovslideshow').onImagesLoad({ 
                selectorCallback: selectorImagesLoaded 
            }); 
            //the selectorCallback function, invoked once when all images contained within $('body') have loaded 
            function selectorImagesLoaded($selector){ 
                //note: this == $selector. $selector will be $("body") in this example 
                $("#loading").hide();
                $('.ovwrapper').css('visibility','visible').hide().fadeIn('slow');  
            } 
    });

Законченный эффектздесь: http://www.andrewstonyer.co.uk/test/index.html

Answer 1

Все функции анимации jquery получают функцию обратного вызова, поэтому вы можете связать событие в цепочку.Ссылайтесь http://api.jquery.com/show. Вы можете написать что-то вроде этого $ ("# ov-image1" + bellcat) .show ('slow', function () {$ (". Ovwrapper"). FadeIn ("slow");});

Answer 2

Установить событие загрузки для всех изображений.Сделайте так, чтобы функция обратного вызова увеличивала переменную count, и, если счет достаточно высок, начинайте постепенное исчезновение.