使用jQuery each遍历img元素时如何过滤URL失效的破损图片？

AI 小北

2026-9-24

实现方法

要排除加载失败的无效图片，我们可以利用浏览器img DOM元素自带的naturalWidth属性判断：加载失败的图片该属性固定返回0，我们只需要在推入数组前加一层判断即可。

场景1：页面所有资源加载完成后执行代码

如果你的逻辑本身是在页面图片全部加载完成后触发，直接加过滤判断即可：

jQuery(window).on('load', function() {
  const imageStack = [];
  jQuery.each(jQuery('img'), function(k, o) {
    // 仅加载成功的图片naturalWidth大于0
    if (o.naturalWidth > 0) {
      imageStack.push(jQuery(o));
    }
  });
});

场景2：DOM加载完成后立即执行代码

如果需要在DOM渲染完成就执行、不等所有图片加载完成，需要结合加载事件处理，避免遗漏还没加载完的图片：

const imageStack = [];
jQuery.each(jQuery('img'), function(k, o) {
  const $currentImg = jQuery(o);
  // 图片加载成功后校验有效性
  $currentImg.on('load', function() {
    if (o.naturalWidth > 0) {
      imageStack.push($currentImg);
    }
  });
  // 图片加载失败直接跳过
  $currentImg.on('error', function() {});
  // 处理已经加载完成的缓存图片
  if (o.complete && o.naturalWidth > 0) {
    imageStack.push($currentImg);
  }
});