js 所有图片加载完成事件

在JavaScript中，要实现所有图片加载完成的事件，可以通过以下几种方式：

一、基础概念

当页面中有多个图片元素时，可能需要等待所有图片都加载完毕后再执行某些操作，例如计算布局、显示页面内容或者开始动画效果等。

二、相关类型及实现方式

1. 使用Image对象预加载并计数
   • 原理：
     • 创建Image对象来预加载图片，在图片的onload事件中增加已加载图片的计数器，当计数器等于图片总数时，表示所有图片加载完成。
   • 示例代码：
   • 示例代码：

• 针对页面中已存在的<img>元素
  • 原理：
    • 遍历页面中的所有<img>元素，为每个元素的onload事件添加处理函数，同时考虑图片可能已经加载完成的情况（通过检查complete属性），同样使用计数器来判断所有图片是否加载完成。
  • 示例代码：
  • 示例代码：

三、应用场景

1. 页面布局调整
   • 当图片加载完成后，可能需要根据图片的实际尺寸来调整页面布局，例如实现响应式的图片排版或者自适应的图片容器大小。

• 用户体验优化
  • 可以在所有图片加载完成后显示页面内容，避免用户看到未完全加载的页面，或者开始一些基于图片内容的动画效果，如图片轮播的初始化。

四、可能遇到的问题及解决方法

1. 图片加载失败
   • 如果某些图片由于网络问题或者路径错误等原因加载失败，上述计数器仍然会将其计入已加载的情况。可以在onerror事件中进行特殊处理，例如重新尝试加载图片或者显示默认图片。
   • 在第一种预加载示例中，已经在onerror事件中打印了错误信息并继续计数，如果想要重新加载失败的图片，可以在onerror中再次创建Image对象并设置src属性。

• 动态添加图片
  • 如果在页面加载过程中动态添加了新的图片元素，上述代码无法检测到这些新图片的加载完成情况。可以创建一个函数来统一处理图片加载完成的检测逻辑，并在添加新图片时调用这个函数。
  • 例如，创建一个checkAllImagesLoaded函数，每次添加新图片时都重新计算loadedCount和totalImages并执行类似的检测逻辑。