仅在加载所有元素后淡入叠加 div？答案

【问题标题】：Only fade in overlay div once all elements have loaded?仅在加载所有元素后淡入叠加 div？
【发布时间】：2010-06-24 16:45:30
【问题描述】：

对我的查询懒惰表示歉意，将尝试更具体。

好的-我如何修改下面的代码，这样我才能保证淡入淡出只会在所有其他操作完成并且html中的所有图像都已加载后才会启动？我是否需要通过 js 加载图像并在每个图像上进行回调？ $(window).load() 中的一些代码。而不是准备好文件？

目前，fadeIn 被异步调用（我猜） - 有时它会在图像仍在加载时淡入 .ovwrapper。以下是在 ajax 脚本加载的 html 的头部准备好的文档。

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

建议的解决方案：

我的解决方案是使用 onImagesLoad jquery 插件。从此回调隐藏加载 gif，然后淡入 .ovwrapper 类。 ('visibility','visible').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

【问题讨论】：

我认为他希望有人重写他的代码。

标签： jquery html ajax

【解决方案1】：

所有的 jquery 动画函数都有回调函数，所以你可以链接事件。参考这个 http://api.jquery.com/show。你可以这样写 $("#ov-image1"+bellcat).show('slow', function(){ $(".ovwrapper").fadeIn("slow"); });

【讨论】：

【解决方案2】：

在所有图像上设置加载事件。让回调函数增加一个计数变量，如果计数足够高，则开始淡入淡出。

【讨论】：