等待 AJAX 响应中的所有内容加载完毕再显示答案

【问题标题】：Wait for all content in AJAX response to be loaded before displaying等待 AJAX 响应中的所有内容加载完毕再显示
【发布时间】：2015-12-05 08:16:38
【问题描述】：

我有一个搜索功能，它在每个字符上使用 json 请求 ping 服务器以返回结果。这部分一切都有效，但我希望发生的事情（我无法弄清楚）是也在 .search-load>.container 上放置一个加载类，然后等待所有图像和内容已被要求在删除加载类之前完全加载。

每次我尝试将 .load 函数绑定到 removeClass 函数时，它最终只是将加载类留在了那里。有任何想法吗？谢谢！

$(document).on('keyup','#section-dropdown.search input',function(event){
            if(searchTimer !== null){
                clearTimeout(searchTimer);
            }
            var query = this.value;
            searchTimer = setTimeout(function(){
                    $('.search-load > .container').addClass('loading');
                    $.getJSON('json/search.json?query='+query,function(data){
                        if(data.length > 0){
                            var html = ''; 
                            for(var i=0,item=data[i];i<data.length;i++){
                                html +='<a class="entry small search" href="'+item.link+'"><article>';
                                html +='<div class="image"><img src="'+item.picture+'" alt="'+item.alt+'"></div>';
                                html +='<div class="content"><h1>'+item.title+'</h1></div></article></a>';
                                if(i==data.length-1){
                                    $('.search-load > .container').html(html);
                                    $('.search-load > .container').removeClass('loading');
                                }
                            }
                        }
                    });

            },200);

});

【问题讨论】：

为什么不调用 $('.search-load > .container').removeClass('loading');在 if 块之后。
@cyril 谢谢，确实删除了它，但我也想让它等到正在添加的内容完全加载（即图像）。有什么想法吗？

标签： javascript jquery ajax

【解决方案1】：

理想情况下，您可以委托 onload 事件，但由于它不会冒泡，因此您不能。因此，如果 IE8

document.addEventListener(
  'load',
  function (event) {
    var elm = event.target;
    if (elm.nodeName.toLowerCase() === 'img' && $(elm).closest('.search-load > .container').length && !$(elm).hasClass('loaded')) { // or any other filtering condition
      console.log('image loaded');
      $(elm).addClass('loaded');
      if ($('.search-load > .container img.loaded').length === $('.search-load > .container img').length) {
        // do some stuff
        console.log("All images loaded!");
        $('.search-load > .container').removeClass('loading');
      }
    }
  },
  true // Capture event
);

您可以在站点的head 部分设置此sn-p，无需任何包装。

附带说明： jQuery 不支持捕获阶段，因此您需要使用相关的 javascript 方法。

【讨论】：