Загрузить изображения с помощью AJAX

Question

Мне нужно загрузить 3 изображения с другой страницы. Это мой код

<script> 
jQuery(document).ready(function($) { 
    var ids = ['#sk6x4', '#sk6x4a', '#sk6x4c']; 
    var tabs = ['#tab1', '#tab2', '#tab3']; 
    function getInfo() { 
    $.each(ids, function (i, id) { 
     $.ajax('/my-url', { 
     success: function(data){ 
      var imgSrc = $(data).find(ids[i] + ' img').attr('src'); 
      $(tabs[i] + ' img').attr('src', imgSrc); 
     } 
     }); 
    }); 
    } 
}); 
</script> 
<ul class="nav nav-tabs" role="tablist"> 
    <li class="active" id="tab1"><img src="" id="imageTriangle"/></li> 
    <li id="tab2"><img src="" id="imageArc"/></li> 
    <li id="tab3"><img src="" id="imageScat"/></li> 
</ul> 

Этот код работает, но очень медленно. Изображения загружаются очень медленно. Как я могу сделать это быстрее? Каков правильный способ загрузки изображений с помощью ajax?

P.S. Оптимизированы изображения

Answer 1

Прежде всего, вы делаете несколько запросов ajax. Было бы лучше сделать только один, и вернуть URL-адреса с помощью JSON или что-то еще. Во-вторых, вам даже не нужен ajax для загрузки изображений. Вы можете сделать так:

$(document).ready(function() { 
var ids = ['#sk6x4', '#sk6x4a', '#sk6x4c']; 
var tabs = ['#tab1', '#tab2', '#tab3']; 
function getInfo() { 
    $.ajax('/my-url', { // ajax call to get urls 
     success: function (data) { 
      $.each(ids, function (i, id) { 

       var imgSrc = data.urls[i] //assuming that data is an array that contains the urls 
       var img = $("<img /> ").attr('src', imgSrc).load(function() { 
        if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) { 
         alert('Error...!'); 
        } 
        else { 
         $(tabs[i]).html() 
        } 
       }); 

      }); 
     } 
    }); 
} 
});