在显示

Question

我有一个搜索功能，在每个字符上，它都会使用json请求对服务器进行ping操作以返回结果。这一部分都有效，但我喜欢发生的事情（我无法弄清楚）是在.search-load＆gt; .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);

});

Answer 1

理想情况下，你会委托onload事件，但因为它没有泡沫，你不能。因此，如果IE8＆lt;支持不是问题。

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部分设置此代码段而不使用任何包装。

作为旁注： jQuery不支持捕获阶段，这就是为什么需要使用相关的javascript方法。