图片加载失败？快用兜底方案搞定！

2024-01-25 00:42:04

网络世界变幻莫测，图片加载失败的状况层出不穷：网路状况差、权限不足、资源不存在等等，都可能导致图片加载失败，直接影响用户体验，让人抓狂。但是，别担心！一个图片加载异常的兜底方案轻松帮你搞定，让你从容应对图片加载失败的各种状况。

图片加载失败的兜底方案

图片加载失败的兜底方案有很多，这里介绍一种简单易用、兼容性好的方案。该方案使用HTML、CSS和JavaScript实现，可以轻松集成到现有的项目中。

HTML

<img src="image.png" alt="Image description" onerror="handleImageLoadError(this)">

在<img>标签中，我们添加了onerror事件处理函数，当图片加载失败时，该函数将被调用。

CSS

.image-error {
  display: none;
}

在CSS中，我们定义了一个.image-error类，用于隐藏图片加载失败时的占位符。

JavaScript

function handleImageLoadError(image) {
  // 显示占位符
  image.classList.add('image-error');

  // 显示错误信息
  const errorMessage = document.createElement('div');
  errorMessage.classList.add('image-error-message');
  errorMessage.textContent = 'Image load failed';
  image.parentNode.insertBefore(errorMessage, image);
}

在JavaScript中，我们定义了handleImageLoadError()函数，该函数在图片加载失败时被调用。函数首先隐藏图片，然后创建一个错误信息元素，并将其插入到图片的父元素中。

自定义错误页面

如果需要，还可以自定义错误页面，以便在图片加载失败时显示。例如，我们可以创建一个image-error.html页面，并将其内容如下：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <h1>Image Load Error</h1>
  <p>Sorry, the image could not be loaded.</p>
</body>
</html>

然后，在handleImageLoadError()函数中，将图片的src属性设置为image-error.html：

function handleImageLoadError(image) {
  // 设置图片的src属性为自定义错误页面
  image.src = 'image-error.html';
}

重试功能

如果需要，还可以添加重试功能，以便在图片加载失败后自动重试。例如，我们可以修改handleImageLoadError()函数，如下所示：

function handleImageLoadError(image) {
  // 显示占位符
  image.classList.add('image-error');

  // 显示错误信息
  const errorMessage = document.createElement('div');
  errorMessage.classList.add('image-error-message');
  errorMessage.textContent = 'Image load failed';
  image.parentNode.insertBefore(errorMessage, image);

  // 重试加载图片
  setTimeout(function() {
    image.src = image.src;
  }, 1000);
}