时间戳

首页 > 解决方案 > 如果图像未加载，则替换跨度内容

javascript - 如果图像未加载，则替换跨度内容

问题描述

我有一个 Image 和 span 标签。如果由于错误而无法加载图像，我想从 DOM 中删除图像元素并使用 id 更改 span 的内容，loadErrorSpan否则"Access Denied. Please login."它将是"Loading...Please wait"

<img src="SomeImage.jpg" onerror="this.remove();" 
     alt="Some Image" width="100" height="120">
<br>
<span id="loadErrorSpan" style="font-family: sans-serif; 
   font-size:18px;text-align: center;color: #666;">Loading...Please wait</span>

我能够在错误时删除图像，但不能更改跨度内容。如何仅使用 JavaScript 执行此操作。不应使用 Jquery 或任何其他库。

标签： javascripthtml

解决方案

您可以制作onerror一个特定的处理程序，在那里，也可以替换跨度内容

function onImgLoadError(imgEl) {
  imgEl.remove()
  document.getElementById('loadErrorSpan').innerText = 'Loading failed'
}
<img src="SomeImage.jpg" onerror="onImgLoadError(this)" alt="Some Image" width="100" height="120">
<br>
<span id="loadErrorSpan" style="font-family: sans-serif; 
   font-size:18px;text-align: center;color: #666;">Loading...Please wait</span>

推荐阅读