Question

我有下一个情况。在html中，我有6个占位符用于动态加载的图像：

 <div class="block">
     <div class="block_content" data-category="sport">
 </div>
 ... 5 more blocks

正如我写的那样 - 我想动态加载图片：

$('._block_content').each(function() {
        let $imageBlock = $(this),
            category = $(this).data('category');

    $.ajax({
        url: here is URL,
        dataType: 'json'
    }).then(function (data) {
            console.log('Success function loaded');
      },
      function () {
            console.log('Failed function loaded');
});

现在的问题是，这种方法在找到图片时效果很好，而在没有图片时效果很慢。例如，如果我输错了网址，首先我会得到6次错误net :: ERR_NAME_NOT_RESOLVED ，然后才会调用失败的函数。我需要等待3秒才能调用失败的函数。有什么方法可以让我在循环中的异步ajax请求更快？有什么想法吗？

Answer 1

我建议不要循环Ajax但是要使用Ajax循环。

var categories=[],cnt=0;
function loadAjax() {
  if (cnt==categories.length) return;
  $.ajax({
    url: "here is URL?cat="+categories[cnt++],
    dataType: 'json'
  },
  success:function (data) {
    console.log('Success function loaded');
  },
  always:function() { loadAjax()  })
}

$('._block_content').each(function() {
   categories.push($(this).data('category'));
});
loadAjax();

Answer 2

您有几个选项，例如您可以使用浏览器缓存或在您的自定义响应中使用承诺。

function img_async(source) {
  return $.Deferred (function (task) {
    var image = new Image();
    image.onload = function () {task.resolve(image);}
    image.onerror = function () {task.reject();}
    image.src=source;
  }).promise();
}

在你的循环中：

$.when(img_async(IMAGE_URL)).done(function (image) {
  $(this).empty().append(image);
});

Answer 3

根据这个，调用.ajax（）应该返回一个jqXHR对象：
http://api.jquery.com/deferred.fail/

我相信这可以解决你的问题：

$.ajax({
        url: here is URL,
        dataType: 'json'
    })
    .done(function (data) {
           // do stuff
      })
      .fail(function() {
    alert( "$.get failed!" );
  });

jQuery ajax内部循环工作得非常慢

3 个答案: