jquery - Jquery 在内容完成加载之前执行

Question

我使用 load() 将某些内容加载到名为“contents”的 div 中，并在开始加载之前将其隐藏。我希望 div 仅在内容完全加载后才会淡入，但似乎 div 'contents' 会在加载完成之前淡入。我使用以下脚本：

$("#menu").click(function(){
        $("#contents").hide().load(loadUrl, function(){
            $(this).fadeIn(1000);});
    });

有人可以帮我解决这个问题吗？我目前正在本地服务器上对其进行测试。

Answer 1

如下使用它，

$("#contents").hide().load(loadUrl, function(){ }).fadeIn(1000);

Answer 2

看起来像浏览器重绘问题，在调用 fadeIn 之前给出超时应该可以解决问题

$("#menu").click(function(){
    $("#contents").hide().load(loadUrl, function(){
        var el = $(this);
        setTimeout(function(){
            el.fadeIn(1000);
        }, 100)
    });
});

您也可以尝试使用延迟功能

$("#menu").click(function(){
    $("#contents").hide().load(loadUrl, function(){
        $(this).delay(10).fadeIn(1000);
    });
});