Как сделать так, чтобы фоновое изображение отображалось до загрузки страницы? - PullRequest
Новая
       9

Как сделать так, чтобы фоновое изображение отображалось до загрузки страницы?

0 голосов
/ 14 октября 2008

Есть ли способ убедиться, что фоновое изображение (большое, 300 КБ) всегда отображается первым, ДО того, как на странице появится какой-либо другой контент?

На сервере у нас есть доступ к PHP.

Ответы [ 6 ]

3 голосов
/ 14 октября 2008

Если у вас есть весь контент внутри контейнера, вы, вероятно, можете довольно близко подойти, используя эту технику. Это также изменится изящно, если JavaScript отключен / недоступен.

Так что, если вам придется сделать это из-за менеджера или чего-то еще, я бы использовал этот метод. 

<html><head><!-- head section --></head>
<body>
    <div id="container">
       <script type="text/javascript">
       <!--
         document.getElementById('container').style.display = 'none';
       -->
       </script>
       Content goes here
    </div>
    <script type="text/javascript">
    <!--
      document.getElementById('container').style.display = 'block';
    -->
    </script>
</body></html>

Однако, если у вас очень мало контента, это, вероятно, не принесет много пользы. Конечно, вы можете добавить таймер во второй блок JavaScript, чтобы задержать его на секунду или около того: P

3 голосов
/ 14 октября 2008

Все html-содержимое обрабатывается и анализируется еще до того, как оно начинает извлекать изображение, поэтому у вас возникла проблема перед началом работы.

Вы можете обойти это, программно скрывая содержимое, а затем вызывая его «показ» при загрузке изображения.

т.е.: 

<html>
  <body>
    <image here/>
    <div id="content" style="display:none;" >

    </div>
    <script type="psudocode"> 
     when(image.loaded){ 
          $("#content").show();
     }
    </script>
  </body>
</html>
2 голосов
/ 14 октября 2008 
<html><head>
<script type="text/javascript">
//Hide on load
onload=function(){
    document.body.style.display="none";
    var imag = new Image();

    imag.onload=function(){
        var main = document.body;
        main.style.backgroundImage="url("+this.src+")";
        main.style.display="";

    };
    imag.src="http://dayton.hq.nasa.gov/IMAGES/MEDIUM/GPN-2000-001935.jpg";
}
</script>
</head>
<body>
    YOU CAN' T SEE MEE!!
</body>
</html>
1 голос
/ 14 октября 2008

Возможный способ, если вы не хотите полагаться на JavaScript, - создать фиктивную страницу только с фоновым изображением. Через несколько секунд он перенаправляется на реальную страницу, и фон быстро загружается, поскольку он уже находится в кеше.

Не очень привлекательное решение, если время установлено, я считаю.
Обратите внимание, что 300KB довольно большой для фонового изображения. Я видел хуже, кто-то использовал изображение размером 1 МБ: даже при относительно быстрой связи я мог видеть фоновую загрузку после элементов страницы.

0 голосов
/ 02 июля 2016

Вы можете загрузить изображение на странице как изображение base64, тогда оно будет уже загружено вместе со страницей.

0 голосов
/ 14 октября 2008

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...