Как предварительно загрузить веб-страницу перед ее показом? - PullRequest
Новая
       34

Как предварительно загрузить веб-страницу перед ее показом?

6 голосов
/ 31 декабря 2010

Я создал простую веб-страницу с несколькими изображениями, но когда пользователь посещает ее, браузер загружает изображения по одному, а не все сразу.

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

Как я могу это сделать?

Ответы [ 5 ]

8 голосов
/ 31 декабря 2010

Вы можете показать изображение загрузчика, поместив его где-нибудь в тег im <img> и используя код js, чтобы скрыть его позже, когда будут показаны все изображения: 

window.onload = function(){
  var el = document.getElementById('elementID');
  el.style.display = 'none';
};

Где elementID предполагаетсябыть идентификатором элемента / тега загрузчика.

Событие load запускается, когда загружаются все изображения / кадры / внешние ресурсы, поэтому к моменту запуска события все изображения загружаются, и поэтому мыскрыть загрузочное сообщение / изображение здесь.

6 голосов
/ 31 декабря 2010

Редактировать: я откладываю до Ответ Keltex. Это гораздо лучшее решение. Я оставлю свой здесь для потомков (если я не должен полностью удалить содержимое и мой ответ? Я новичок здесь).

Другое решение, которое довольно часто использовалось в прошлом, - это создание целевой страницы, которая предварительно загружает все ваши изображения. Когда предварительная загрузка завершена, она перенаправляется на реальный сайт. Чтобы это работало, вам нужно получить URL-адреса для всех изображений, которые вы хотите загрузить, а затем сделать что-то вроде этого: 

# on index.html, our preloader
<script type='text/javascript'>
    // add all of your image paths to this array
    var images = [
        '/images/image1.png',
        '/images/image2.png',
        '/images/image3.png'
    ];

    for(var i in images) {
        var img = images[i];
        var e = document.createElement('img');
        // this will trigger your browser loading the image (and caching it)
        e.src = img;
    }

    // once we get here, we are pretty much done, so redirect to the actual page
    window.location = '/home.html';
</script>
<body>
    <h1>Loading....</h1>
    <img src="loading.gif"/>
</body>
5 голосов
/ 31 декабря 2010

Вы можете сделать это с JQuery.Скажем, ваша страница выглядит следующим образом: 

<body>
   <div id='loader'>Loader graphic here</div>
   <div id='pagecontent' style='display:none'>Rest of page content here</div>
</body>

У вас может быть функция JQuery для отображения содержания страницы при загрузке всей страницы: 

$(document).ready(function() {
    $(window).load(function() {
         $('#loader').hide();
         $('#pagecontent').show();
    });
});
3 голосов
/ 04 ноября 2013

HTML 

<div id="preloader">
    <div id="loading-animation">&nbsp;</div>
</div>

JAVASCRIPT 

<script type="text/javascript">
    /* ======== Preloader ======== */
    $(window).load(function() {
        var preloaderDelay = 350,
                preloaderFadeOutTime = 800;

        function hidePreloader() {
            var loadingAnimation = $('#loading-animation'),
                    preloader = $('#preloader');
            loadingAnimation.fadeOut();
            preloader.delay(preloaderDelay).fadeOut(preloaderFadeOutTime);
        }

        hidePreloader();
    });
</script>

CSS 

#preloader {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    position: fixed;
    background-color: #fff;
}

#loading-animation {
      top: 50%;
      left: 50%;
      width: 200px;
      height: 200px;
      position: absolute;
      margin: -100px 0 0 -100px;
      background: url('loading-animation.gif') center center no-repeat;
}
2 голосов
/ 17 апреля 2015

Создайте div с предварительным загрузчиком имени класса и поместите загрузчик внутри этого div.

стиль preloader для класса, как показано ниже 

  .preloader {
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        background-color: white; 
        /* background-color is would hide the data before loading
        text-align: center;
   }

Html 

   <div class="preloader">
    Any loader image
   </div>

Jquery 

     $(window).load(function(){
        $('.preloader').fadeOut(); // set duration in brackets
    });

Простой загрузчик страниц готов ....

...