首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JavaScript:给定一个图像URL列表,如何显示第一个未损坏的图像?

在JavaScript中,要实现这个功能,可以使用以下步骤:

  1. 创建一个新的Image对象。
  2. 为Image对象添加一个load事件监听器。
  3. 在load事件监听器中,检查Image对象的width和height属性,以确定图像是否已成功加载。
  4. 如果图像已成功加载,将其显示在页面上。
  5. 如果图像未成功加载,尝试加载下一个URL。

以下是一个示例代码:

代码语言:javascript
复制
function displayFirstImage(imageUrls) {
  const img = new Image();
  let index = 0;

  img.addEventListener('load', () => {
    if (img.width > 0 && img.height > 0) {
      document.body.appendChild(img);
    } else {
      loadNextImage();
    }
  });

  img.addEventListener('error', () => {
    loadNextImage();
  });

  function loadNextImage() {
    if (index >= imageUrls.length) {
      return;
    }

    img.src = imageUrls[index];
    index++;
  }

  loadNextImage();
}

const imageUrls = [
  'https://example.com/image1.jpg',
  'https://example.com/image2.jpg',
  'https://example.com/image3.jpg',
];

displayFirstImage(imageUrls);

这个代码会尝试按照给定的URL列表顺序加载图像,直到找到第一个未损坏的图像并将其显示在页面上。如果所有图像都损坏,则不会显示任何图像。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

领券