Question

在我的查询中懒惰道歉，将尝试更具体。

好的 - 如何修改下面的代码，以便我可以保证只有在完成所有其他操作并且加载了html中的所有图像后才会启动fadeIn？我是否需要通过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

Answer 1

所有jquery动画函数都有getback工具，所以你可以链接事件。请参阅此 http://api.jquery.com/show。你可以写这样的东西$（“＃ov-image1”+ bellcat）.show（'slow'，function（）{$（“。ovwrapper”）。fadeIn（“slow”）;}）;

Answer 2

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

所有元素加载后才会淡化叠加div？

2 个答案: