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

            });
        }
    });
}
});

使用AJAX加载图像

1 个答案: