2012-06-11 5 views
2

Как я могу показать текст вместо изображения перед загрузкой изображения?показать вместо текста текст вместо изображения

Потому что на веб-сайте HTML у меня есть изображение в качестве названия страницы, поэтому страница загружается полностью, и заголовок изображения появляется позже.

ответ

4
<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> 
+0

Как вы определяете размеры изображения? (точка бытия, там часто * не * способ сделать это.) – Michael

1

использовать Alt тег, но даже это не является гарантией:

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

В качестве альтернативы, вы можете использовать JS хак: Установить заголовок страницы в виде текста и заменить содержимое заголовка контейнера с изображением используя JS после полной загрузки страницы.

1

Вы можете динамически загружать изображения в 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 нагружает изображение динамически. Обработчик плавно меняет изображение.

+0

Его вопрос не помечен 'jQuery' – Sarfraz

+3

Я не думаю, что имеет смысл использовать jQuery только для этого (если только OP уже не использует jQuery. Это избыток imo –

+0

Да, я хотел предоставить «гладкое» решение, а не полагаться на текст alt, который не так приятен для пользователя. –

3

Как насчет this-

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

JQuery это хороший вариант, чтобы сделать это :-)

Смежные вопросы