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>

Answer 2

这个怎么样-

<div id="img">some text</div>
<script>
 $(document).ready(function(){
   $("#img").innerHTML="<img src="myimg.jpg">"
  });
 });
 </script>

jQuery 是一个很好的选择：-)

Answer 3

使用 Alt 标签，但即使这样也不能保证：

<img src="yourimagepath" alt="Title Text" title="Title Text" />

或者，您可以使用 JS hack：将页面的标题设置为文本，并在整个页面加载后使用 JS 将标题容器的内容替换为图像。

Answer 4

只需很少的代码，您就可以在 jQuery 中动态加载图像。如果您喜欢这种方式，您可以做一些平滑的事情，例如放置“正在加载...”动画或 AJAX 微调器来代替您的内容。

来自对 j​​Query 文档的评论

var _url = "image.jpg";

// set up the node / element
_im =$("<img>");

// hide and bind to the load event
_im.hide();
_im.bind("load",function(){ $(this).fadeIn(); });

// append to target node / element
$('body div#target').append(_im);

// set the src attribute now, after insertion to the DOM
_im.attr('src',_url);

在伪代码中，创建和隐藏图像元素，分配 onload 事件处理程序，设置 src 属性动态加载图像。处理程序平滑地淡入图像。