Загрузка страницы JQuery даже с эффектом CSS на веб-сайте HTML - PullRequest
Новая
       9

Загрузка страницы JQuery даже с эффектом CSS на веб-сайте HTML

0 голосов
/ 11 сентября 2018

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

Что я могу сделать?

Это можно решить, когда мы добавим jquery, где, если страница полностью загружена, то после этого уведомления иначе не показывать. Но я не знаком с jquery или JavaScript, прошу помочь всем, кто захочет здесь, кто поможет мне создать jquery или решить эту проблему.

Мой код указан ниже. 

#myTostwarning {        
        position: absolute;
        top:0;left:0;        
        border-radius:0;
        font-size:14px;
        margin:0;
        width:100%;
        z-index:1000;
        overflow: hidden;
        background:#fff5b3;        
        line-height: 16px;
        padding:18px 36px; 
        -webkit-box-shadow:2px 2px 3px rgba(0,0,0,.1);
        box-shadow:2px 2px 3px rgba(0,0,0,.1);
        cursor:default;color:#333;
        }
       #myTostwarning a{
       color: #333;
       }  
#myTosterror {      
        position: absolute;
        top:0;left:0;        
        border-radius:0;
        font-size:14px;
        margin:0;
        width:100%;
        z-index:1000;
        overflow: hidden;
        background:#f44336; 
        min-height:50px;
        line-height: 18px;        
        overflow: hidden;
        padding:18px 36px; 
        -webkit-box-shadow:2px 2px 3px rgba(0,0,0,.1);
        box-shadow:2px 2px 3px rgba(0,0,0,.1);
        cursor:default;color:#fff;     
        } 
       #myTosterror a{
       color: #FFFFFF;
       }  
#myTostSuccess {
        position: absolute;
        top:0;left:0;
        border-radius:0;
        margin:0;
        overflow: hidden;
        width:100%;
        font-size:14px;
        z-index:1000;
        background:#83B655;
        min-height:50px;
        padding:16px 36px;    
        line-height: 16px;
        -webkit-box-shadow:2px 2px 3px rgba(0,0,0,.1);
        box-shadow:2px 2px 3px rgba(0,0,0,.1);
        cursor:default;color:#fff;
        }
        #myTostSuccess a{
       color: #FFFFFF;
       }  
#myTostnotice {
        position: absolute;
        top:0;left:0;
        border-radius:0;
        margin:0;
        width:100%;
        z-index:1000;
        overflow: hidden;
        font-size:14px;
        background:#033C83;
        min-height:50px;
        padding:16px 36px;
        line-height: 16px;  
        -webkit-box-shadow:2px 2px 3px rgba(0,0,0,.1);
        box-shadow:2px 2px 3px rgba(0,0,0,.1);
        cursor:default;color:#fff;
        }        
       #myTostnotice a{
       color: #FFFFFF;
       }  
.cssanimations.csstransforms #myTostSuccess,#myTosterror,#myTostwarning,#myTostnotice {
        -webkit-transform: translateY(-100%);
        -webkit-animation: slideDown 10.5s 0.1s 1 ease forwards;
        -moz-transform:    translateY(-100%);
        -moz-animation:    slideDown 10.5s 0.1s 1 ease forwards;
    }
    .cssanimations.csstransforms #close {
      display: none;
    }
    @-webkit-keyframes slideDown {
        0%, 100% { -webkit-transform: translateY(-100%); }
        1%, 99% { -webkit-transform: translateY(0px); }
    }
    @-moz-keyframes slideDown {
        0%, 100% { -moz-transform: translateY(-100%); }
        1%, 99% { -moz-transform: translateY(0px); }
    }
<div id='myTostwarning'>$msg</div>
<div id='myTostSuccess'>$msg</div>
<div id='myTostnotice'>$msg</div>
<div id='myTosterror'>$msg</div>

Ответы [ 2 ]

0 голосов
/ 11 сентября 2018

Вам необходимо включить CDN jQuery в ваш html-файл прямо перед конечным тегом <body>.Вот CDN ... 

<script src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous">
</script>

Я получил это от здесь.

Следующим шагом будет в вашем javascript написать следующую функцию: 

 jQuery( document ).ready( function($) {

      //You will now be able to access jquery within this function. Everything in here will wait until the document is loaded before running.

 });

Тогда ваш тег сценария javascript будет помещен под тег сценария jquery в html.

Но, как указывает @Elroy Fernandes, вы можете выполнять те же функции без включения jquery.

-Edit - 

 <div class="notifications">$msg</div>
 <div class="notifications">$msg</div>
 <div class="notifications">$msg</div>
 <div class="notifications">$msg</div>

 jQuery( document ).ready( function($) {

      $(".notifications").each( function(index, element) {
          switch(index) {
              case 0: $(element).attr("id", "myTostwarning");break;
              case 1: $(element).attr("id", "myTostSuccess");break;
              case 2: $(element).attr("id", "myTostnotice");break;
              case 3: $(element).attr("id", "myTosterror");break;
          }
      });
 });

Обратите внимание, что я удалил ваши идентификаторы из html и заменил их классом "уведомления", так что мы можем ориентироваться на эти конкретные элементы.Затем мы используем jQuery, чтобы дождаться загрузки документа, а затем добавляем идентификатор в базу элементов вне их позиции в списке.Поскольку идентификатор не будет добавлен до окончания загрузки страницы, анимация не начнется до тех пор.

0 голосов
/ 11 сентября 2018

вы можете использовать 

window.onload = function () { document.getElementById("myTostwarning").classList.add('Start-warning'); };

и изменять класс при загрузке страницы.

...