如何用JQuery自动隐藏加载完成后特定尺寸的图片？

你遇到的核心问题是**load事件不会冒泡**，所以$(document).on('load', 'img', ...)这种事件委托的写法根本不会生效——事件没法冒泡到document上让监听器捕获到。而click事件是会冒泡的，所以委托写法能正常工作。

下面给你几个可行的解决方案，适配jQuery 3.3.1，同时支持动态生成的图片：

方法1：插入图片时直接绑定load事件 #

如果你的分页或DOM操作是自己的代码控制的，那在插入图片到DOM的同时，直接为每个图片绑定load事件，同时处理缓存图片的情况：

// 示例：假设你从后端获取图片列表后插入DOM
function addNewImages(imageSrcList) {
  const $container = $('#your-image-container'); // 替换成你的图片容器选择器
  
  imageSrcList.forEach(src => {
    const $img = $('<img>', { src: src, class: 'thumbnail' });
    
    // 绑定load事件检查尺寸
    $img.on('load', function() {
      if ($(this).width() === 177 && $(this).height() === 142) {
        $(this).hide();
      }
    });
    
    // 处理图片已缓存的情况：直接触发load事件
    if ($img[0].complete) {
      $img.trigger('load');
    }
    
    $container.append($img);
  });
}

方法2：用MutationObserver自动监听新增图片 #

如果没法在插入图片时直接绑定（比如用第三方插件生成内容），可以用浏览器原生的MutationObserver监听DOM变化，自动为新添加的图片绑定检查逻辑：

// 选择图片所在的父容器（范围越小，性能越好）
const targetContainer = document.getElementById('your-image-container');

// 创建观察者实例
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    // 遍历所有新增的节点
    mutation.addedNodes.forEach(node => {
      // 只处理img元素
      if (node.tagName === 'IMG') {
        const $img = $(node);
        
        $img.on('load', function() {
          if ($(this).width() === 177 && $(this).height() === 142) {
            $(this).hide();
          }
        });
        
        // 处理缓存图片
        if (node.complete) {
          $img.trigger('load');
        }
      }
    });
  });
});

// 配置监听选项：监听子节点新增，包括子树里的节点
observer.observe(targetContainer, {
  childList: true,
  subtree: true
});

额外注意事项 #

• 不要依赖$(document).on('load', 'img', ...)的写法，因为load事件不支持事件委托，这是jQuery和DOM事件的特性决定的。
• 检查图片尺寸时，必须确保图片已经加载完成，否则width()和height()会返回0或者不正确的值，这就是为什么要绑定load事件或者检查complete属性的原因。

内容的提问来源于stack exchange，提问作者Konstantin