外部ソースから完全に読み込まれるまでボタンを表示するにはどうすればよいですか。ボタンをロードする前に、ロードが進行中であることを示す gif プリローダーがあります。私が投稿したコードはボタンを表示するように機能していますが、同時にすべてではなく、1つずつロードします。
私のコードは次のとおりです。
<div class="social-holder">
<div class="social-buttons-holder">
</div>
</div>
ユーザーが「social-holder」クラスの div にカーソルを合わせると、「social」という名前の外部ページからボタンが読み込まれます。
$('.social-holder').hover(function(){
if($(".social-buttons").length > 0){
$('.social-buttons-holder').show();
}
else {
$('.social-buttons-holder').addClass('preloader');
$('.social-buttons-holder').load('/social', function() {
$('.social-buttons-holder').removeClass('preloader');
});
}
}, function(){
$('.social-buttons-holder').hide();
});
外部ページの構造は次のとおりです。
<div class="social-buttons">
<div class="social-button">
</div>
<div class="social-button">
</div>
<div class="social-button">
</div>
</div>
クラス「social-button」を持つ各 div には、ソーシャル ボタンの標準コードが含まれているため、ここには投稿しません。そのため、ユーザーがクラス「social-holder」の div にカーソルを合わせると、クラス「social-buttons」の div がクラス「social-buttons-holder」の div 内にロードされます。ソーシャル ボタンがまだロードされていない場合、プリローダー gif 画像を表示するクラス「プリローダー」が div に追加されます。Jquery ロードが外部コンテンツをロードすると、「プリローダー」クラスは削除されますが、ボタンは iframe に 1 つずつロードされます。プリローダーはロード プロセスを非表示にする必要があるため、同時にロードする必要があります。