1

我正在将 JSON 文件中的内容加载到 HTML 结构中，并且想等到 JSON 内容加载完毕后再显示 HTML，有没有办法可以执行这行代码：$('#wrapper').animate({opacity:1});何时loadContent();完成？

$('#mch-overlay-content').load('layer_already.html', function() {
    loadContent();
    $('#wrapper').animate({opacity:1});
});

function loadContent(){ 
    $.ajax({
        url: "json/" + language + "/content.json",
        data: "nocache=" + Math.random(),
        type: "GET",
        cache : false,
        contentType: "application/json",
        dataType: "json",
        success: function(source){
            data = source;
            showStartpage(data);
        },
        error: function(data){
            alert("Failed to load content");
        }
    }); 
}

function showStartpage(){
    $("#game-logo a").addClass(language);
    $(".start .text3").html(data[language]['startpage']['text3']);
    $(".start .text4").html(data[language]['startpage']['text4']);
    $(".start .text5").html(data[language]['startpage']['text5']);
    $(".start .text6").html(data[language]['startpage']['text6']);
    $(".start .text7").html(data[language]['startpage']['text7']);
}
4

4 回答 4

2

将代码添加到success回调中：

success: function(source){
    data = source;
    showStartpage(data);
    $('#wrapper').animate({opacity:1});
},
于 2013-11-09T11:24:31.313 回答
1 
$('#mch-overlay-content').load('layer_already.html', function() {
        loadContent(function() {
            $('#wrapper').animate({opacity:1});
        });
});

 function loadContent(callback){ 
        $.ajax({
            url: "json/" + language + "/content.json",
            data: "nocache=" + Math.random(),
            type: "GET",
            cache : false,
            contentType: "application/json",
            dataType: "json",
            success: function(source){
                data = source;
                showStartpage(data);
                callback();
            },
            error: function(data){
                alert("Failed to load content");
            }
        }); 



    }

    function showStartpage(){
            $("#game-logo a").addClass(language);
            $(".start .text3").html(data[language]['startpage']['text3']);
            $(".start .text4").html(data[language]['startpage']['text4']);
            $(".start .text5").html(data[language]['startpage']['text5']);
            $(".start .text6").html(data[language]['startpage']['text6']);
            $(".start .text7").html(data[language]['startpage']['text7']);
    }
于 2013-11-09T11:26:41.087 回答
0

当然！将包装动画放在ajax success函数的末尾

function loadContent()
{ 
    $.ajax(
    {
        url: "json/" + language + "/content.json",
        data: "nocache=" + Math.random(),
        type: "GET",
        cache : false,
        contentType: "application/json",
        dataType: "json",
        success: function(source)
        {
            data = source;
            showStartpage(data);
            $('#wrapper').animate({opacity:1}); // <- place it here
        },
        error: function(data){
            alert("Failed to load content");
        }
    }); 
}
于 2013-11-09T11:26:58.820 回答
0

您可以为此使用延迟：

$('#mch-overlay-content').load('layer_already.html', function() {
    var dfd = loadContent();
    dfd.done(function(){
        $('#wrapper').animate({opacity:1});
    });
});

function loadContent(){ 
    return $.ajax({
        url: "json/" + language + "/content.json",
        data: "nocache=" + Math.random(),
        type: "GET",
        cache : false,
        contentType: "application/json",
        dataType: "json",
        success: function(source){
            data = source;
            showStartpage(data);
        },
        error: function(data){
            alert("Failed to load content");
        }
    }); 
}

当然，如果没有可能将动画直接放入成功回调中

于 2013-11-09T11:31:57.193 回答