使用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请求。最好只做一个，然后用JSON或其他东西返回URL。其次，你甚至不需要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() 
        } 
       }); 

      }); 
     } 
    }); 
} 
});