javascript - 在图像加载之前显示替代文本代替图像

Question

如何在图片加载前显示文本而不是图片？

因为在 HTML 网站上我有一个图像作为页面的标题，所以页面完全加载，然后标题图像出现。

Answer 1

<h1><img src="heading.png" alt="Some nice heading here"
         width="600" height="80"></h1>

使用 alt 属性并设置图像尺寸(在 HTML 或 CSS 中)以确保浏览器可以在获取图像之前分配适当的空间。您还可以将 CSS 样式应用于 img 元素，例如字体、大小和颜色；在现代浏览器上，当尚未(或从未)获取图像时，样式将应用于替代文本。使用上面的代码，您可以在 h1 元素上设置样式。

或者，最初仅使用(样式化的)文本作为标题，但使用 JavaScript 将其替换为图像:

<h1 style="width: 600px; height: 80px">Some nice heading here</h1>
<script>
new Image('heading.png'); // preloads the image
var h1 = document.getElementsByTagName('h1')[0];
h1.innerHTML = '<img src=heading.png alt="' + h1.innerHTML + '">';
</script>