我有这个代码将博客帖子从一个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>
标签。
我想在等待所有数据的同时显示一个加载器,但是我没有找到一种方法来等待所有图像在显示文章之前加载。我怎样才能做到这一点?
提前致谢。