在从 Ajax 成功加载所有数据后，我想使用另一个 ajax 来更改图像加载.gif

Question

$.ajax({
type: "POST",
url: url,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
for (var i = 0; i < response.posts.length; i++) {
post_id = posts[i].id;
title = post[i].title
thumbnail = posts[i].thumbnail_url;
$('#post').append('<p>'+title+'</p>')
$('#post').append('<img id="'+post_id+'" src="/loading.gif">)
}
}
})

对于图像，我希望在从 Ajax 成功加载所有数据之后，然后我想使用另一个 ajax 将图像加载.gif更改为thumbnail_url。 有没有更好的方法，或者有什么请帮助我..！

Answer 1

在调用 ajax 函数之前，在 #posts 后附加一个div，其中 id=latest 已加载.gif图像。 收到来自 ajax 的响应后，请从帖子中删除此div。 然后使用您的函数，您可以附加帖子和图像。 我对代码进行了一些语法更改。 我无法真正检查代码。 但我相信它会奏效。希望这有帮助。

$('#post').append('<div id="latest"><img src="/loading.gif"></div>');        
$.ajax({
type: "POST",
url: url,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(response) {
var posts = response.posts;
//remove the div with loading gif                
$( "#latest" ).remove();
for (var i = 0; i < response.posts.length; i++) {
var post_id = posts[i].id;
var title = posts[i].title;
var thumbnail = posts[i].thumbnail_url;
$('#post').append('<p>'+title+'</p>');
$('#post').append('<img class="loading" id="'+post_id+'" src="'+thumbnail+'">');  
}
}
});
<style>
.loading{
background:transparent url(loading.gif) center center no-repeat;
}
</style>