用html、css、js 代码实现图片没有加载成功时用一定高度占位

可以使用以下的代码实现：

HTML:

<div class="image-placeholder">
  <img src="path/to/image" alt="Image">
</div>

CSS:

.image-placeholder {
  width: 100%;
  height: 300px; /* 设置占位高度 */
  background-color: #f5f5f5; /* 设置占位背景颜色 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-placeholder img {
  display: none;
}

JS:

const img = document.querySelector('.image-placeholder img');

img.addEventListener('load', () => {
  img.style.display = 'block';
});

img.addEventListener('error', () => {
  // 加载失败处理
});

以上代码的思路是：先使用一个占位 div 来占据图片的位置，并设置好高度与背景颜色，然后将图片设置为不可见，当图片加载成功时，再将其显示出来。如果图片加载失败，则可以在 error 事件中进行处理。

相关问题

html+css+js实现图片懒加载

图片懒加载可以通过以下步骤实现：

1. 在 HTML 中，将图片的 src 属性设置为一个占位符或者空值，例如：

<img src="placeholder.jpg" data-src="real-image.jpg" />

2. 在 CSS 中，为占位符图片设置宽度和高度，以确保页面布局不会因为图片加载而改变：

img {
  width: 100%;
  height: auto;
}

3. 在 JavaScript 中，监听滚动事件，当图片进入可视区域时，将 data-src 属性的值赋给 src 属性，实现图片的懒加载：

window.addEventListener('scroll', function() {
  var images = document.querySelectorAll('img[data-src]');
  for (var i = 0; i < images.length; i++) {
    var image = images[i];
    if (image.getBoundingClientRect().top < window.innerHeight) {
      image.src = image.getAttribute('data-src');
      image.removeAttribute('data-src');
    }
  }
});

这样，当用户滚动页面时，图片会在进入可视区域时才被加载，从而加快页面加载速度。

页面加载时如何使用图片占位符

在页面加载时使用图片占位符可以提高页面的加载速度和用户体验。一种常见的方式是使用一个具有相同长宽比的小图片作为占位符，在图片加载完成之前显示。

以下是使用图片占位符的示例代码：

<!-- 使用占位符图片 -->
<img src="placeholder.png" data-src="real-image.jpg" alt="Real Image">

<!-- 使用CSS设置占位符图片 -->
<div style="background-image: url('placeholder.png'); width: 500px; height: 300px;" data-src="real-image.jpg"></div>

在上面的代码中，`placeholder.png`是占位符图片的 URL，`data-src`属性是真实图片的 URL。在页面加载时，先加载占位符图片，然后使用 JavaScript 或 LazyLoad 等库来延迟加载真实图片。

需要注意的是，如果使用 `img` 标签来实现图片占位符，应该为图片设置合适的 `alt` 属性，以提高页面的可访问性。