Only fade in overlay div once all elements have loaded?

Apologies in the laziness in my query, will try to be more specific.

OK- How can I modify the code below so I can guarantee that the fadeIn will only start after all the other actions have been done and all the images in the html have been loaded? Will I need to load the images via js with a callback on each? Some of the code in a $(window).load(). instead of document ready?

At the moment the fadeIn is being called asynchronously (I'm guessing) - sometimes it fades 开发者_开发问答.ovwrapper in when an image is still loading. the following is in a document ready at the head of the html loaded by the ajax script.

//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");
    });

Proposed solution:

My solution has been to use the onImagesLoad jquery plugin. Callback from this hides the loading gif and then fades in the .ovwrapper class. The ('visibility','visible').hide() bit is because I needed visibility:hidden as I am messing with image position and scale before fading in the completed overlay:

$(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');  
            } 
    });

Finished effect is here: http://www.andrewstonyer.co.uk/test/index.html

All the jquery animation function get callback facility so u can chain the event. Refer this http://api.jquery.com/show. You can write something like this $("#ov-image1"+bellcat).show('slow', function(){ $(".ovwrapper").fadeIn("slow"); });

Set a load event on all the images. Have the callback function increment a count variable, and if the count is high enough then start the fade.