Автор Тема: Не закрывать страницу до полной загрузки следующей  (Прочитано 376 раз)

16 Февраль 2017, 13:37:21
  • Старожил
  • ****
  • Сообщений: 380
  • Репутация: +1/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Добрый день!
Дело в том что при сложной графике страниц, страницы открываются либо частями, или долговато.
Есть много вариантов для того чтобы не менять страницу пока следующая не загружена.
Попробовал сделать такую загрузку.
Хотел поставить в header.tpl
Но вот вопрос..
Поставил, пробовал но при переходе с главной страницы на любую другую этот кусок..
<div class='hidescreen'>
</div>

клинит...
Вопрос, куда ставить этот div что-бы все работало.
Или подскажите как еще можно сделать ожидание до полной загрузки страницы.
Типа как при открытии быстрого просмотра, зачек загрузки...
Вот скрипт..
<head>
<style type="text/css">
#content {
 margin:auto;
        margin-top:10px;
 width:80%;
 text-align:center;
 }
.hidescreen {
 z-index: 9998;
 width:100%;
 height:100%;
 background:#000000;
 opacity:0.7;
        filter: alpha(opacity=70);
 left:0;
 top:0;
 }
.load_page {
 z-index: 9999;
 left: 50%;
 top: 50%;
 background: #ffffff;
 padding: 30px 10px;
 text-align: center;
        font: normal normal 15px Verdana;
        border-radius: 3px;
        margin-left: -125px;
 width: 250px;
}
.hidescreen,
.load_page {
 position: fixed;
 /*display:none;*/
}
.close {
 position: absolute;
  top: 10px;
 right: 10px;
 border: 1px solid #666;
 border-radius: 2px;
 font: normal bold 12px/14px Comic Sans MS;
 text-align: center;
 background: #FFF;
 color:#C00;
 cursor:pointer;
 height: 14px;
 width: 13px;
}
.close:hover {
 background: #C00;
 color: #FFF;
}
</style>

</head>

<body>
 
  <script language="JavaScript">
$(function(){
  $('.hidescreen, .load_page').fadeIn(10);
 $(window).load(function() {
   $('.hidescreen,.load_page').fadeOut(600);
 });
  $('.close').click(function(){
  $('.hidescreen,.load_page').fadeOut(300);
  });
 });
</script>


<div class='load_page'>
  <b class='close'>X</b>Загрузка...
   <br>
  <img src="loader.gif" />
   <br>
  <b>Ждите</b>
 </div>
 
 <div class='hidescreen'>
</div>
Спасибо!
16 Февраль 2017, 15:38:38
Ответ #1
  • Ветеран
  • *****
  • Сообщений: 16667
  • Репутация: +14630/-5
  • Сообщество PrestaShop
    • Просмотр профиля
Можно создать Javascript preloader
$(window).load(function() {
  setTimeout(function() {
    $('#preloader').fadeOut('slow', function() {
    });
  }, 600);
});
В шаблоне header.tpl добавить слой
<div id="page">
        <div id="preloader"></div>
В файле global.css создать стили для слоя
#preloader {position: fixed;left: 0;top: 0;width: 100%;height: 100%;overflow: visible;z-index: 99999; background: white url("../img/my-ajax-loader.gif") no-repeat center center; }
16 Февраль 2017, 19:31:30
Ответ #2
  • Старожил
  • ****
  • Сообщений: 380
  • Репутация: +1/-0
  • Сообщество PrestaShop
    • Просмотр профиля
Спасибо большое за ответ!
Пробую...