上千张图片解析链接 分析能不能加载出来

148 阅读1分钟

js的Image对象来加载图片,并通过onloadonerror事件监听加载成功和失败的情况,然后分别将图片放到两个数组中。

不能加载 image.png

能加载 image.png

使用for循环遍历图片URL数组,并为每个URL创建一个Image对象,然后为onloadonerror事件添加相应的回调函数。在回调函数中,将成功和失败的URL分别放到successArrayerrorArray中。最后,通过将图片URL赋值给img.src来加载图片。

js代码编译

<script>
    // 图片路径数组
  const images = [
  'https://jquee-dev.oss-cn-beijing.aliyuncs.com/shmetro/a101/a101034399.jpg',
  'https://jquee-dev.oss-cn-beijing.aliyuncs.com/shmetro/a101/a101030295.jpg',
  'https://jquee-dev.oss-cn-beijing.aliyuncs.com/shmetro/a101/a101026536.jpg',
  'https://jquee-dev.oss-cn-beijing.aliyuncs.com/shmetro/a101/a101041099.jpg',
  'https://jquee-dev.oss-cn-beijing.aliyuncs.com/shmetro/a101/a101023394.jpg',
  'https://jquee-dev.oss-cn-beijing.aliyuncs.com/shmetro/a101/a101019704.jpg',
  'https://jquee-dev.oss-cn-beijing.aliyuncs.com/shmetro/a101/a101012745.jpg',
  'https://jquee-dev.oss-cn-beijing.aliyuncs.com/shmetro/a101/a101028626.jpg',
  'https://jquee-dev.oss-cn-beijing.aliyuncs.com/shmetro/a101/a101049770.jpg',
  'https://jquee-dev.oss-cn-beijing.aliyuncs.com/shmetro/a101/a101042448.jpg',
  ]
  const successArray = [];
  const errorArray = [];

  for (let i = 0; i < images.length; i++) {
    const img = new Image();
    img.onload = function() {
      successArray.push(images[i]);
      // console.log(successArray);
    };
    img.onerror = function() {
      errorArray.push(images[i]);
      console.log(errorArray);
    };
    img.src = images[i];
  }
  </script>