После того, как все данные успешно загружены из Ajax, я хочу использовать другой ajax для изменения изображения loading.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, чтобы изменить изображение loading.gif на thumbnail_url.Есть ли лучший способ, или что-нибудь, пожалуйста, помогите мне ..!

Answer 1

Непосредственно перед вызовом функции ajax добавьте #posts с помощью div с id = latest, для которого было изображение loading.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>