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中动态加载图像。如果你喜欢这样的话，你可以做一些平滑的事情，例如放置“Loading ...”动画或AJAX旋转器来代替你的内容。

来自对jQuery文档的评论

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属性。处理程序平滑地淡化图像。

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

4 个答案: