0

私はこれがかなり尋ねられていることを知っていますが、コンテンツが読み込まれる前に、Facebookのサインアップフォームと他の多くのサイトがどのように表示されるかをできるだけ簡単に表示する必要があります.

    $("#signUpPanel").click(function(){
      $("#headInner").html("<img class='spinner' src='imgs/spinner.gif'>");
        $("#headInner").load("signUp.php");
 });

これは私がこれまでに持っていたもので、表示されていますが、それを見ることさえほとんど不可能です. delay() 関数またはそれに類似したものを使用することを考えていました。事前に感謝し、できればできるだけシンプルにしてください。

4

5 に答える 5

3

クリックがトリガーされる前に、どこかに画像をプリロードする必要があります。
なぜ遅延を使用するのか、ロード中の画像が表示されないほどコンテンツがロードされるのに十分な速さでコンテンツがロードされる場合は、ロード中の画像を表示するだけで余分な時間を待つ必要はありません。

于 2012-05-10T22:44:01.757 に答える
0 
$("#signUpPanel").click(function(){
  $("#headInner").html("<img class='spinner' src='imgs/spinner.gif'>");
  setTimeout(function(){$("#headInner").load("signUp.php");},1000);  
 });
于 2012-05-10T22:42:26.907 に答える
0

正しい方法：

 $("#signUpPanel").click(function(){
     // in this way after image loaded, page will be load ...
     $('<img class='spinner' src='imgs/spinner.gif' />').load(function(){
         $("#headInner").html($(this));
         $("#headInner").load("signUp.php");
     });

 });
于 2012-05-10T23:19:26.150 に答える
0

問題は、dom に追加していることです。これを行う必要があります。

$('#headerInner').addClass('loadingClass');

.loadingClass { background-image: url('imgs/spinner.gif') }

$('#headerInner').removeClass('loadingClass');
于 2012-05-10T23:20:00.263 に答える
0 
var img = $('<img/>')[0].src = 'imgs/spinner.gif'; //preload
    img.className = 'spinner'; //add class

$("#signUpPanel").on('click', function(){
    $("#headInner").html(img).load("signUp.php"); //load will remove the image
});

見ることさえ不可能な場合、ロードは十分に高速であるため、通常、スピナーを使用することはお勧めできません。

クールなスピナーを表示するためだけに機能を遅らせることは、Web サイトを強化することとは正反対です。

于 2012-05-10T23:26:08.900 に答える