2

画像が読み込まれる前に、画像の代わりにテキストを表示するにはどうすればよいですか?

HTML Web サイトでは、ページのタイトルとして画像があるため、ページは完全に読み込まれ、タイトル画像は後で表示されます。

4

4 に答える 4

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

属性を使用しaltて画像のサイズを (HTML または CSS で) 設定し、ブラウザーが画像を取得する前に適切なスペースを割り当てられるようにします。img要素に CSS スタイル (フォント フェース、サイズ、色など)を適用することもできます。最新のブラウザーでは、画像がまだ取得されていない (または取得されていない) 場合に、スタイリングが代替テキストに適用されます。上記のコードを使用して、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>
于 2012-06-11T11:46:00.287 に答える
3

これはどう-

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

jQueryはこれを行うための良いオプションです:-)

于 2012-06-11T11:50:27.213 に答える
1

非常に少量のコードだけで、jQuery に画像を動的にロードできます。この方法が気に入れば、「読み込み中...」アニメーションや 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 属性を設定します。ハンドラーは画像をスムーズにフェードインします。

于 2012-06-11T11:33:59.860 に答える
1

Alt タグを使用しますが、それでも保証されません。

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

または、JS ハックを使用することもできます。ページのタイトルをテキストとして設定し、ページ全体が読み込まれた後に、JS を使用してタイトル コンテナーのコンテンツを画像に置き換えます。

于 2012-06-11T11:30:00.700 に答える