Показывать иконку «Загрузка» при загрузке скриптов

Я хочу отобразить значок «загрузка» или gif с полностью черным фоном (с прозрачностью) (100% ширины и высоты) при загрузке некоторых скриптов (backstretch и JQuery Scrollbar) , Когда эти коды загружены, я хочу, чтобы значок «Gif Загрузка» и черный фон исчезли, а затем отобразите всю и обычную веб-страницу. Что мне нужно сделать? Здесь у вас есть коды, которые я использую для этих сценариев.Показывать иконку «Загрузка» при загрузке скриптов

Бэкстретч

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-backstretch/2.0.3/jquery.backstretch.min.js"></script> 
     <script> 
     $.backstretch([ 
       "http://www.hqdiesel.net/gallery/albums/userpics/10004/iggy_hqdiesel130~0.jpg" 
      , "http://www.hqdiesel.net/gallery/albums/userpics/10004/iggy_hqdiesel128~0.jpg" 
      , "http://www.hqdiesel.net/gallery/albums/userpics/10004/iggy_hqdiesel143~0.jpg" 
      ], {duration: 5000, fade: 750}); 
</script>

JQuery Scrollbar

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script src="http://danithemes.fanscity.eu/shugar/wp-content/uploads/2014/11/jquery.mCustomScrollbar.concat.min_.js"></script> 
<script> 
    (function($){ 
     $(window).load(function(){ 
      $(".onliners, .packages").mCustomScrollbar(); 
     }); 
    })(jQuery); 
</script>

Спасибо так много! И я извиняюсь за свой английский!

источник

2014-11-28 PLL On Abc

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

Вы можете просто добавить фоновое изображение в свой загрузочный div с помощью CSS, и вам просто нужно скрыть этот div, когда загрузятся все ваши скрипты.

Вот это ЯШ:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script> 
    (function($){ 
     $(window).load(function(){ 
      $(".myLoadingDiv").fadeOut(600); 
     }); 
    })(jQuery); 
</script>

А вот CSS:

.myLoadingDiv { 
    width: 100%; 
    height: 100%; 
    background-color: rgba(0,0,0,0.8); /* opacity to your taste */ 
    background-image: url(img/yourGif.gif); 
    background-repeat: no-repeat; 
    background-position: 50% 50%; 
    position: absolute; 
    left: 0; top: 0; 
    z-index: 9999; /* at the top of the world */ 
}

источник

2014-12-01 15:28:09

Показывать иконку «Загрузка» при загрузке скриптов

ответ

Смежные вопросы