ビューPHPリモートファイルは、それが完全にロードされています後

Question

私はロードアニメーション画像

<style> 
.loadingbg{width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: #84ffbf; 
display: none; 
} 
.loadingbg img{width: 60px; height: 60px; position: absolute; left: 48%; top: 48%;} 
</style> 

<script> 
$(document).on('click','a',function (e) { 
    $(".loadingbg").css('display','block'); 
    e.preventDefault(); 
    var url = $(this).attr('href'); 
    $('#container').load(url+ '#content',function() { 
     $(".loadingbg").css('display','none'); 
    }); 
}); 
</script> 

<div class="loadingbg"><img src="images/page-loader.gif"></div> 
<a href="contact.php">contact</a> 
<a href="about.php">about</a> 

<div id="container"> 
    <h1>index</h1> 
</div> 

に表示し、非表示にする機能を.LOAD使用して、ページをロードすることなく、容器内のphpファイルを表示するには、単純なコードを使用してい

リンクをクリックすると背景と小さなアニメーション画像が表示され、URLを変更することなく他のページを読み込むことができますが、テキストコンテンツをすばやく取得して読み込みが消え、新しいWebページに画像が読み込まれます。私が望むのは、リモートPHPファイルが完全にロードされてから画像が読み込まれるまで、loadingbgを隠さないことです。

$(document).on('click','a',function (e) { 
    $(".loadingbg").css('display','block'); 
    e.preventDefault(); 
    var url = $(this).attr('href'); 
    $('#container').load(url+ '#content',function() { 
     $('#container').on("load", function(){ 
      $(".loadingbg").css('display','none'); 
     }); 
    }); 
}); 

は "負荷" イベントをバインド：私は...私は、これが動作する100％わからないこと

を認めざるを得ない。しかし、私はこれをしようと

Demo

Answer 1

コンテンツを読み込んだ後、すべての画像がロードされていることを確認する必要があります。

1. ロードコールバック関数では、imagesLoaded library（または画像読み込みを検証するその他のライブラリ）を使用できます。また、アンカークリックで私は#containerを隠し、すべての画像がロードされている場合 - その後、再びそれを示しています

$(document).on('click','a',function (e) { 
    $(".loadingbg").css('display','block'); 
    $("#container").hide(); 
    e.preventDefault(); 
    var url = $(this).attr('href'); 
    $('#container').load(url+ '#content',function() { 
     $('#container').imagesLoaded(function() { 
      // images have loaded 
      $(".loadingbg").css('display','none'); 
      $("#container").show(); 
     }); 

    }); 
}); 

Answer 2

​​コールバックの#containerには、.loadingbgのCSS変更が、すべてのコンテンツが完全に読み込まれた瞬間に「遅らせる」ことが想定されています。