Дождаться полной загрузки изображения, прежде чем отобразить на странице? - PullRequest
Новая
       16

Дождаться полной загрузки изображения, прежде чем отобразить на странице?

2 голосов
/ 17 мая 2011

Я разрабатываю веб-сайт для клиента и пытаюсь выяснить, как сообщить текущему браузеру, просматривающему страницу, дождаться полной загрузки фонового изображения, прежде чем оно отобразится на странице. Это большое фоновое изображение (в байтах), и оно должно загружаться после загрузки. Я тоже хочу сделать то же самое с логотипом, но я в тупике.

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

Ответы [ 2 ]

5 голосов
/ 17 мая 2011

То, что приходит на ум без фактически используемого или проверенного, это обертывание изображения.Я буду использовать jQuery для примера 

<div class="loading"><img/></div>

CSS может быть 

.loading { display: inline-block; }
.ie6 .loading, .ie7 .loading { display: inline; } /* these could be set by http://www.modernizr.com/ */
.loading img {
     visibility: hidden;
     background: url('path/to/loading.gif') center center no-repeat transparent;
     vertical-align: bottom; /* or display: block; to kill the inline white space */
}

JavaScript (jQuery) 

  $(function(){
    $('.loading img').load(function(){
         $(this).css('visibility','visible');
    });
   });
2 голосов
/ 17 мая 2011 
<script  type='text/javascript'>

$(document).ready(function(){

$('body').css('backgroundImage','url(http://yoursite/yourimage.jpg)');

});

</script>

Поместите его в конец HTML-документа (перед закрытием тега body). Очевидно, что URL должен быть URL вашего изображения. И вы должны импортировать библиотеку jquery в заголовок вашего документа. 

<code><script  type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

- или вы можете скачать jquery и поместить его на свой сервер)

Также, если вы не хотите прикреплять фоновое изображение к телу, просто укажите вместо этого свой идентификатор div (например, ('#content'))

...