Jquery Show Image Before .load（）

Question

これはかなり頼まれていることは知っていますが、できるだけ簡単にコンテンツを読み込む前に、Facebookのサインアップフォームと他の多くのサイトの内容を表示する必要があります。

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

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

Answer 1

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

Answer 2

あなたはクリックが遅延を使用する理由
をトリガーされる前に、内容がロードを見ていない十分に速くロードした場合、画像はどこか、誰が、ちょうどロード画像を参照してください、余分な時間を待つことを望んでいないプリロードする必要がありますあなたは喜んでいるはずのイメージ。

Answer 3

正しい方法：

$("#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"); 
    }); 

}); 

Answer 4

問題は、あなたがDOMに追加されています。あなたはこれをする必要があります。

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

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

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

Answer 5

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 
}); 

それもそれを見ることは不可能だ場合は、負荷が、それは通常、スピナーと悪いアイデアだということは十分に高速です。

あなたのクールなスピナーを表示するだけの機能を遅らせることは、あなたのウェブサイトを強化することの逆です。