如何在JavaScript中验证图片变量是否成功加载URL对应的有效图片资源

一、判断图片资源是否加载成功的实现方案 #

你可以通过监听<img>元素的load和error事件来判断资源是否加载有效：

• load事件会在图片资源成功加载完成后触发
• error事件会在资源加载失败（比如被拦截、链接失效、跨域限制等）时触发

你可以改造现有代码，实现加载失败自动尝试下一张图片的逻辑，参考代码如下：

const myImages = [
  'https://cdn.pixabay.com/photo/2017/02/08/11/09/rainforest-2048447_960_720.jpg',
  'https://images.freeimages.com/images/large-previews/01a/snail-1397758.jpg',
  'https://cdn.pixabay.com/photo/2017/09/17/20/35/sloth-2759724_960_720.jpg'
];
// 尝试加载第index张图片
function tryLoadImage(index = 0) {
  // 所有图片都尝试过仍失败的兜底逻辑可自行补充
  if (index >= myImages.length) return;
  const img = document.createElement('img');
  img.style.width = '100%';
  img.style.height = 'auto';
  // 加载成功回调
  img.onload = function() {
    document.querySelector('#pageContent').replaceWith(img);
  };
  // 加载失败回调，尝试下一张
  img.onerror = function() {
    tryLoadImage(index + 1);
  };
  // 事件绑定完成后再赋值src，避免缓存图片触发事件时绑定还没完成
  img.src = myImages[index];
}
// 从随机位置开始尝试
const randomStart = Math.floor(Math.random() * myImages.length);
tryLoadImage(randomStart);

注意要先绑定事件再给src赋值，否则如果是已经被浏览器缓存的图片，会立刻触发事件，此时事件绑定还没完成就会失效

二、JavaScript分号使用建议 #

JS本身支持自动分号插入（ASI）机制，理论上可以省略分号，但存在部分特殊场景ASI无法正确判断，会导致代码执行异常，最典型的场景包括：

• 行首为(、[、反引号的情况，会和上一行代码被合并解析
• return关键字后面换行的情况，ASI会自动在return后面插入分号，导致返回值不生效

你有C/C++开发背景，本身就有书写分号的习惯，建议你保留书写分号的习惯，可以完全规避ASI的坑，不需要额外记忆特殊规则。如果后续接触到无分号风格的代码，再针对性了解相关注意事项即可。

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