在圖像加載之前顯示代替圖像的替代文本

因爲在HTML網站上我有一個圖像作爲頁面的標題，所以頁面加載完畢，標題圖像稍後進來。

2012-06-11 Robin Rodricks

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

使用alt屬性和設置圖像尺寸（HTML或CSS），以確保瀏覽器可以獲取圖像之前分配適當的空間。您還可以將CSS樣式應用於img元素，例如，字體，大小和顏色;在現代瀏覽器中，當圖像還沒有得到（或曾經）時，樣式將被應用於替代文本。使用上面的代碼，您可以在h1元素上設置樣式。

Altenatively，只使用（樣式）文本最初的標題，但使用圖像替換它的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-11 11:46:00

你如何確定圖像尺寸？（要指出的是，經常有*不是這樣做的一種方式。） – Michael

使用Alt標籤，但即使這樣也不能保證：

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

或者，你可以破解使用JS：設置你的網頁文本的標題和圖像替換標題容器的內容在完整頁面加載後使用JS。

來源

2012-06-11 11:30:00

您可以動態加載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-11 11:33:59

他的問題沒有標籤'jQuery' – Sarfraz

我不認爲這是有道理的使用jQuery的只有這一點（除非OP已經使用jQuery。這是一個矯枉過正的imo –

是的，我想提供一個「流暢」的解決方案，而不是依賴alt文本，這不是一個很好的用戶體驗。 –

如何這 -

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

jQuery是一個不錯的選擇做這:-)

來源

2012-06-11 11:50:27 Ash

在圖像加載之前顯示代替圖像的替代文本

回答

相關問題