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将图像loading.gif更改为thumbnail_url。有没有更好的方法，或者有什么请帮我..！

Answer 1

在调用ajax函数之前，请在#posts后面附加一个具有loading.gif图像的id = latest的div。收到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>

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

1 个答案: