LoadingオーバーレイをJavascriptでHTMLに変換

htmlファイルの読み込みが完了するまでユーザーインタラクションをブロックするためにオーバーレイと読み込みスピナーを配置しようとしています。LoadingオーバーレイをJavascriptでHTMLに変換

チュートリアルhttp://www.jqueryrain.com/?eKV1bCMa を参照して、ページ全体オーバーレイと単一要素オーバーレイを配置しようとしています。しかし、それは動作していません。それはを成し遂げるために助けを求めてはは下記のありがとうございます。このため、追加のjQueryライブラリを必要としないcode.`

<script src="loadingoverlay.js"></script> 
 
<script src="loadingoverlay.min.js"></script> 
 
<script src="jquery-1.9.1.min.js"></script> 
 

 

 
<script> 
 
$(document).ready(function(){ 
 
    $("#firstdata").click(function(){ 
 
     $("#div1").load("data2.html"); 
 
    }); 
 
\t $("#driver").click(function(){ 
 
     $("#div1").load("demo_test.txt"); 
 
    }); 
 
}); 
 

 

 

 
\t // Show full page Loading Overlay 
 
\t 
 
$(document).ready(function(){ 
 
\t $("#firstdata").click(function() 
 
\t { 
 
\t $.LoadingOverlay("show"); 
 

 
\t // Hide it after 3 seconds 
 
\t setTimeout(function(){$.LoadingOverlay("hide");}, 3000); 
 

 
}); \t 
 
}); 
 

 
// Show element Loading Overlay 
 
\t 
 
$(document).ready(function(){ 
 
\t $("#driver").click(function() 
 
\t { 
 
\t $("#element").LoadingOverlay("show"); 
 

 
\t // Hide it after 3 seconds 
 
\t setTimeout(function(){$.LoadingOverlay("hide");}, 3000); 
 

 
}); \t 
 
}); 
 
\t 
 
</script>

<body> 
 

 
<div id="element"> 
 
<input type = "button" id = "firstdata" value = "External Content" /><br> 
 
<br><br> 
 
<input type = "button" id = "driver" value = "Load Data" /> 
 
<br><br><br><br> 
 
</div> 
 
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div> 
 
</body>

出典

2016-03-31 Mukesh Paniker

あなたのHTMLファイルにloadingoverlay.jsファイルを追加しましたか？それは私のために働いています。 – Batman

ファーストを助けることを願って、あなたはそれ以外の場合は動作しません、前に、他のプラグインをjQueryのをロードする必要があります。はその後、フルと同じスクリプトを縮小さバージョンは必要ありませんので、あなたのスクリプトのロードは次のようになります。コード自体について

<script src="jquery-1.9.1.min.js"></script> <script src="loadingoverlay.min.js"></script>

、期待通りに動作する場合、私は知りません、あなたがそれらのすべてのハンドラとタイマーを必要としないことを確かめてください。$(document).ready 機能のcompleteパラメータを利用することができます。スクリプト全体は次のように書くことができます：

$(document).ready(function(){ $("#firstdata").click(function(){ $.LoadingOverlay("show"); $("#div1").load("data2.html", function(){ $.LoadingOverlay("hide"); }); }); $("#driver").click(function(){ $("#element").LoadingOverlay("show"); $("#div1").load("demo_test.txt", function(){ $("#element").LoadingOverlay("hide"); }); }); });

出典

2016-03-31 07:54:17 Eggplant

素晴らしい..！スムーズに働く。たくさんありがとう。 –

ようこそ。 – Eggplant

です。シンプルな基本CSSとjQueryコードで実現できます。以下のように：

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 

<style type="text/css"> 

.loader { 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    width: 100%; 
    height: 100%; 
    z-index: 9999; 
    background: url('ajax-loader.gif') 50% 50% no-repeat rgb(249,249,249); 
    opacity: 0.5; 
    display: none; 
} 
</style> 


<script type="text/javascript"> 
    function showLoader(){ 
     //show loader onclcik of button 
     $('.loader').css('display','block'); 
     setTimeout(function(){ 
      var changedText = 'Text changes'; 
      $('#div1').html(changedText);// enter text here to required changes 
      $('.loader').css('display','none'); 
     }, 3000);  
} 


</script> 
</head> 
<body> 


<div class="loader"></div> 

<div id="element"> 
<input type = "button" value = "Load Data" onclick="showLoader();" /> 
</div> 
<div ><h2 id="div1">Let jQuery AJAX Change This Text</h2></div>

注：あなたは参照用http://www.ajaxload.info/からローダーイメージをダウンロードすることができます。

が、これはすべての

出典

2016-03-31 07:45:22 Prajwal

LoadingオーバーレイをJavascriptでHTMLに変換

答えて

関連する問題