jQuery图片加载代码偶现TypeError: Cannot read properties of undefined (reading 'indexOf')原因

这个报错TypeError: Cannot read properties of undefined (reading 'indexOf')，本质是你绑定的readImage函数中，有某个变量被当成字符串调用indexOf，但该变量偶尔会是undefined。结合你提供的代码片段，具体可能的场景如下：

• readImage函数依赖的图片属性未初始化
  当你通过$(this).load()手动触发load事件时，虽然图片的complete属性为true，但某些场景下（比如图片从缓存读取但src属性未被正确赋值、或图片加载失败导致src为空），readImage函数中用到的某个属性（比如this.src、$(this).data('xxx')等）会是undefined，此时对它调用indexOf就会抛出错误。

• 页面存在重复id的元素
  虽然HTML规范要求id唯一，但如果页面上有多个id="image"的元素，$("#image")会匹配第一个元素，但each遍历会处理所有匹配到的元素。其中某个元素可能未正确加载、甚至未完成渲染，触发load事件时，readImage函数访问的变量为undefined。

• jQuery版本兼容问题
  若你使用的jQuery版本较旧，手动调用$(this).load()触发事件时，可能传递异常的事件对象或上下文，导致readImage函数中依赖的事件参数（比如event.target）为undefined，进而引发后续的indexOf调用错误。

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