如何在HTML中使用LoadGo動畫

我想在打開我的網站時加載我的徽標。所以我試圖使用LoadGo動畫從Here 如何在HTML中使用LoadGo動畫

我需要與我的html頁面集成，它正在加載按鈕單擊事件。但是如何在加載事件中改變它。如何在我的網站加載時正確整合它。

任何樣品？

我的代碼是在這裏：

<div class="container" style="margin-top: 150px;"> 
    <div class="col-md-4 col-md-offset-4"> 
     <img id="cocacola" src="cocacola.png" alt="Coca Cola Logo" class="img-responsive logo" 
      style="margin: 0 auto;" /> 
    </div> 
    <div id="demo-progress-1" style="margin-bottom: 10px; font-size: 16px; opacity: 0; 
     font-weight: bold;"> 
     0 %</div> 
    <button class="btn btn-primary" onclick="mainDemo();"> 
     <span class="glyphicon glyphicon-thumbs-up"></span>&nbsp;Start 
    </button> 
</div> 
    <script type="text/javascript"> 
    var cocacolaInterval; 
    function mainDemo() { 
     $('#demo-msg-1').animate({ 
     'opacity': '0' 
     }); 
     $('#demo-progress-1').animate({ 
     'opacity': '1' 
     }); 
     var p = 0; 
     $('#cocacola').loadgo('resetprogress'); 
     $('#demo-progress-1').html('0%'); 
     window.setTimeout(function() { 
     cocacolaInterval = window.setInterval(function(){ 
      if ($('#cocacola').loadgo('getprogress') == 100) { 
      window.clearInterval(cocacolaInterval); 
      $('#demo-msg-1').animate({ 
       'opacity': '1' 
      }); 
      $('#demo-progress-1').animate({ 
       'opacity': '0' 
      }); 
      } 
      else { 
      var prog = p*10; 
      $('#cocacola').loadgo('setprogress', prog); 
      $('#demo-progress-1').html(prog + '%'); 
      p++; 
      } 
     }, 150); 
     }, 300); 
    }; 
    $(window).load(function() { 
     $("#cocacola").load(function() { 
      // Main demo 
      $('#cocacola').loadgo(); 
     }).each(function() { 
      if (this.complete) $(this).load(); 
     }); 

     //mainDemo(); 
     // $(".container").hide(); 
    }); 
    </script>

加載後頁面的標誌會隱藏。

來源

2017-05-06 Hisanth

標誌加載

請嘗試下面的代碼。

<script type="text/javascript"> 
      jQuery(window).load(function($) { 
       jQuery("#page_load").fadeOut("slow"); 
      }); 
     </script> 
     <div id="page_load" style="position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 999999; background: #27599A url('cocacola.png') center no-repeat; background-size: 80px;"></div>

來源

2017-05-06 10:57:46

剛把mainDemo();推到第3行以來就結束了。

var cocacolaInterval; 
 
    function mainDemo() { 
 
     $('#demo-msg-1').animate({ 
 
     'opacity': '0' 
 
     }); 
 
     $('#demo-progress-1').animate({ 
 
     'opacity': '1' 
 
     }); 
 
     var p = 0; 
 
     $('#cocacola').loadgo('resetprogress'); 
 
     $('#demo-progress-1').html('0%'); 
 
     window.setTimeout(function() { 
 
     cocacolaInterval = window.setInterval(function(){ 
 
      if ($('#cocacola').loadgo('getprogress') == 100) { 
 
      window.clearInterval(cocacolaInterval); 
 
      $('#demo-msg-1').animate({ 
 
       'opacity': '1' 
 
      }); 
 
      $('#demo-progress-1').animate({ 
 
       'opacity': '0' 
 
      }); 
 
      } 
 
      else { 
 
      var prog = p*10; 
 
      $('#cocacola').loadgo('setprogress', prog); 
 
      $('#demo-progress-1').html(prog + '%'); 
 
      p++; 
 
      } 
 
     }, 150); 
 
     }, 300); 
 
    }; 
 
    
 
    $(window).load(function() { 
 
     $("#cocacola").load(function() { 
 
      // Main demo 
 
      $('#cocacola').loadgo(); 
 
     }).each(function() { 
 
      if (this.complete) $(this).load(); 
 
      mainDemo(); 
 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css"> 
 
<script src="http://www.jqueryscript.net/demo/Image-Loading-Animation-Plugin-with-jQuery-CSS3-LoadGo/loadgo.js"></script> 
 

 
<div class="container" style="margin-top: 150px;"> 
 
    <div class="col-md-4 col-md-offset-4"> 
 
     <img id="cocacola" src="http://www.jqueryscript.net/demo/Image-Loading-Animation-Plugin-with-jQuery-CSS3-LoadGo/cocacola.png" alt="Coca Cola Logo" class="img-responsive logo" 
 
      style="margin: 0 auto;" /> 
 
    </div> 
 
    <div id="demo-progress-1" style="margin-bottom: 10px; font-size: 16px; opacity: 0; 
 
     font-weight: bold;"> 
 
     0 %</div> 
 
    <button class="btn btn-primary" onclick="mainDemo();"> 
 
     <span class="glyphicon glyphicon-thumbs-up"></span>&nbsp;Start 
 
    </button> 
 
</div>

來源

2017-05-06 11:06:12 Sylogista

我LoadGo插件的開發者（很高興見到你！）。根據文檔：

這個插件將無法控制異步行爲爲您加載過程，所以你必須要做到這一點你自己在你的應用程序。

LoadGo只是一個前端的插件，這意味着它不會爲您所管理的加載過程，你必須自己解決這個問題。

你可以看到一些見解這裏：

來源

2017-06-16 15:14:45

如何在HTML中使用LoadGo動畫

回答

相關問題