在图像加载之前显示代替图像的替代文字 [英] show alternate text in place of an image, before image loads

问题描述

因为在HTML网站上我有一个图像作为页面的标题，因此页面会完全加载，而标题图像会在稍后显示。

h1>< img src =heading.pngalt =这里有一些不错的标题
width =600height =80>< / h1>

使用 alt 属性并设置图片尺寸（在HTML或CSS中）以确保浏览器在获取图像之前可以分配适当的空间。您还可以将CSS样式应用于 img 元素，例如字体，大小和颜色;在现代浏览器中，当图像还没有得到（或曾经）时，样式将被应用于替代文本。使用上面的代码，您可以在 h1 元素上设置样式。

另外，只需使用（样式）文本最初的标题，但用JavaScript代替它：

 < h1 style =width：600px; height：80px >一些不错的标题< / h1> 
< script> 
 new Image（'heading.png'）; //预载图片
 var h1 = document.getElementsByTagName（'h1'）[0]; 
 h1.innerHTML ='< img src = heading.png alt =''+ h1.innerHTML +'>'; 
< / script> 
  

How can I show text in place of an image, before the image loads?

Because on an HTML website I have an image as the title of the page, so the page loads completely, and the title image comes in later.

解决方案

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

Use the alt attribute and set the image dimensions (in HTML or in CSS) to ensure that browsers can allocate appropriate space before getting the image. You can also apply CSS styling to the img element, e.g. font face, size, and color; on modern browsers, the styling will be applied to the alternate text when the image has not been got yet (or ever). Using code above, you can set the styles on the h1 element.

Altenatively, use just (styled) text for the heading initially but replace it by the image using 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>

这篇关于在图像加载之前显示代替图像的替代文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！