如何使用 jQuery 检测指定容器内所有图片加载完成-html教程-PHP中文网

如何使用 jQuery 检测指定容器内所有图片加载完成

本文介绍一种简洁可靠的 jquery 方案，通过计数器机制精准监听单个 div 内所有 img 元素的加载完成事件，避免全局 load 陷阱，适用于多容器并行处理场景。

本文介绍一种简洁可靠的 jquery 方案，通过计数器机制精准监听单个 div 内所有 img 元素的加载完成事件，避免全局 load 陷阱，适用于多容器并行处理场景。

在前端开发中，常需在特定容器（如 .imgs）内所有图片加载完毕后执行动画、布局调整或懒加载初始化等操作。但 $(window).on('load') 会等待整个页面所有资源（含 CSS、JS、跨域图片等），无法满足“按容器粒度”响应的需求；而直接绑定 img.load 事件又面临已缓存图片不触发事件的常见缺陷——这是该问题的核心难点。

以下是一个健壮、可复用的 jQuery 解决方案：

jQuery(document).ready(function($) {
  // 遍历每个目标容器（支持多个 .imgs）
  $('.imgs').each(function() {
    const $container = $(this);
    const $imgs = $container.find('img').filter(':not([data-loaded])'); // 排除已标记的

    if ($imgs.length === 0) {
      // 所有图片已就绪（如全部来自缓存或已加载）
      onAllImagesLoaded($container);
      return;
    }

    let loadedCount = 0;

    $imgs.on('load', function() {
      loadedCount++;
      $(this).attr('data-loaded', 'true'); // 防止重复计数
      if (loadedCount === $imgs.length) {
        onAllImagesLoaded($container);
      }
    }).on('error', function() {
      // 处理加载失败：仍计入计数，避免死锁
      loadedCount++;
      if (loadedCount === $imgs.length) {
        onAllImagesLoaded($container);
      }
    });

    // 主动检查已缓存图片（关键！）
    $imgs.each(function() {
      const img = this;
      if (img.complete && img.naturalWidth !== 0) {
        $(img).trigger('load');
      }
    });
  });
});

// 自定义回调函数：所有图片加载完成后执行
function onAllImagesLoaded($container) {
  console.log('✅ 所有图片在容器内加载完成:', $container[0]);
  // 示例：添加 CSS 类启用动画
  $container.addClass('images-loaded');
  // 示例：初始化瀑布流布局
  // initMasonry($container);
}

关键要点说明：

jQuery 1.12.4

jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。

下载