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

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

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

<!-- 使用占位符图片 -->
<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` 属性，以提高页面的可访问性。