使用AJAX加载图像

Question

I need to load 3 images from another page. This is my code

<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>

This code works but wery slow. Images load very slowly. How i can make it faster? What is the right way to load images by ajax?

P.S. Images are optimized

Answer 1

First of all, you are making multiple ajax requests. It would be better to make just one, and return the URLs with JSON or something. Secondly, you don't even need ajax to load images. You can do like this:

$(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()
                    }
                });

            });
        }
    });
}
});