CountImages()函数实际功能是什么？为何存在异常计数行为？

一、CountImages()的实际功能 #

CountImages()的核心作用是统计指定范围内（通常是当前页面或目标DOM容器）的图像资源数量，一般会识别以下类型的图像：

• DOM结构中的<img>标签元素
• CSS样式中设置的背景图像
• 部分内嵌的图像资源（如base64编码图像、SVG图标）

二、异常行为的原因解析 #

1. 无可见图像但返回数值>0 #

这种情况通常是因为函数统计了视觉不可见但实际存在的图像元素：

• 页面中存在通过display: none、visibility: hidden或定位偏移（如left: -9999px）隐藏的<img>标签，这类元素仍属于DOM节点，会被函数捕获计数；
• 页面预加载的图像资源（浏览器已发起请求但未渲染到可视区域）；
• 内嵌的SVG图标、base64格式的图像，这类资源可能未在页面中显示，但仍会被统计逻辑识别。

2. 图像被重复计数 #

常见触发场景：

• 遍历逻辑未做去重处理：同一图像元素被克隆生成多个DOM节点，或者同一图像URL被多个<img>标签引用，都会被重复统计；
• 响应式图片结构：<picture>标签内的<source>与<img>组合，可能被函数误判为两个独立图像；
• 同时统计DOM图像与CSS背景图：同一视觉图像如果既以<img>标签展示，又作为某个元素的背景图，会被计数两次。

3. 偶尔统计正常 #

这种不稳定表现和页面渲染时机、资源加载状态直接相关：

• 当函数在页面完全加载前执行时，部分图像元素还未完成DOM挂载或渲染，导致计数遗漏或偏差；
• 当页面所有资源加载完成、DOM结构稳定后执行函数，就能准确捕获所有图像元素；
• 浏览器缓存也会影响结果：缓存的图像资源加载更快，DOM节点生成更及时，遍历逻辑能准确统计。

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