等待嵌套循环$ getJSON调用完成

时间:2016-02-09 13:38:11

标签: jquery callback nested getjson complete

我有这个代码将博客帖子从一个wordpress博客加载到另一个(我控制两个博客):

<div id="belgium-posts">
    <h3 class="fp-section-title">What we are talking about</h3>
    <div class="loader"><span class="fa fa-spinner fa-spin"></span></div>
    <script>
    (function($) {
        $.getJSON('http://example.com/wp-json/wp/v2/posts/?filter[category_name]=belgium&per_page=3', {format: "json"}, function(data) {
            $.each(data, function(key, value) {
                $('<article data-index="'+key+'" style="display:none"><div class="row"><div class="col-xs-3"><img class="img-responsive" src="'+value["featured_image_urls"]["medium_large"]+'"></div><div class="col-xs-9"><h4><a href="/blog/?id='+value["id"]+'">'+value["title"]["rendered"]+'</a></h4><main>'+value["acf"]["summary"]+'</main><a class="read-more" href="/blog/?id='+value["id"]+'">Read more...</a></div</div></article>').appendTo("#belgium-posts");
            });
        }).done(function() {
            $(".loader").hide();
            $("#belgium-posts article").show();
        });
    })(jQuery);
    </script>
    </div>
</div>

所以基本上我有一个JSON调用来获取帖子,然后我遍历所有返回的帖子并填写<article>标签。 我想在等待所有数据的同时显示一个加载器,但是我没有找到一种方法来等待所有图像在显示文章之前加载。我怎样才能做到这一点?

提前致谢。

0 个答案:

没有答案