6

以下のコードを使用しています。

bodyタグ内のレイアウトページ：

<div id="loading">
    <img src="/images/user_profile/ajax-loading.gif" alt="Loading.." />
</div>

開始ページで:

<script type="text/javascript">
      $(document).ready(function(){
      $(window).load(function(){
      $('#loading').fadeOut();
      });
      });
</script>

CSS:

div.loading{

   height: 100px;
   width: 100px;
   position: fixed;
   z-index: 1000;
   left: 50%;
   top: 50%;
   margin: -25px 0 0 -25px;
   display:block;
}

問題は、回転する画像がすぐに表示されず、空白のページが表示され、ページが読み込まれる直前に画像が表示されるために時間がかかることです。

画像がすぐに表示され、ページ全体が読み込まれるまでソリューションが必要です。

4

5 に答える 5

5

画像をプリロードする方法はたくさんありますが（CSS / Javascriptなどを使用）、インラインで画像を含めるなどの小さな画像に対して確実に機能した方法は

<img src="data:image/gif;base64,R0lGODlhEAAQAPQAAP///wAAAPDw8IqKiuDg4EZGRnp6egAAAFhYWCQkJKysrL6+vhQUFJycnAQEBDY2NmhoaAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAAFdyAgAgIJIeWoAkRCCMdBkKtIHIngyMKsErPBYbADpkSCwhDmQCBethRB6Vj4kFCkQPG4IlWDgrNRIwnO4UKBXDufzQvDMaoSDBgFb886MiQadgNABAokfCwzBA8LCg0Egl8jAggGAA1kBIA1BAYzlyILczULC2UhACH5BAkKAAAALAAAAAAQABAAAAV2ICACAmlAZTmOREEIyUEQjLKKxPHADhEvqxlgcGgkGI1DYSVAIAWMx+lwSKkICJ0QsHi9RgKBwnVTiRQQgwF4I4UFDQQEwi6/3YSGWRRmjhEETAJfIgMFCnAKM0KDV4EEEAQLiF18TAYNXDaSe3x6mjidN1s3IQAh+QQJCgAAACwAAAAAEAAQAAAFeCAgAgLZDGU5jgRECEUiCI+yioSDwDJyLKsXoHFQxBSHAoAAFBhqtMJg8DgQBgfrEsJAEAg4YhZIEiwgKtHiMBgtpg3wbUZXGO7kOb1MUKRFMysCChAoggJCIg0GC2aNe4gqQldfL4l/Ag1AXySJgn5LcoE3QXI3IQAh+QQJCgAAACwAAAAAEAAQAAAFdiAgAgLZNGU5joQhCEjxIssqEo8bC9BRjy9Ag7GILQ4QEoE0gBAEBcOpcBA0DoxSK/e8LRIHn+i1cK0IyKdg0VAoljYIg+GgnRrwVS/8IAkICyosBIQpBAMoKy9dImxPhS+GKkFrkX+TigtLlIyKXUF+NjagNiEAIfkECQoAAAAsAAAAABAAEAAABWwgIAICaRhlOY4EIgjH8R7LKhKHGwsMvb4AAy3WODBIBBKCsYA9TjuhDNDKEVSERezQEL0WrhXucRUQGuik7bFlngzqVW9LMl9XWvLdjFaJtDFqZ1cEZUB0dUgvL3dgP4WJZn4jkomWNpSTIyEAIfkECQoAAAAsAAAAABAAEAAABX4gIAICuSxlOY6CIgiD8RrEKgqGOwxwUrMlAoSwIzAGpJpgoSDAGifDY5kopBYDlEpAQBwevxfBtRIUGi8xwWkDNBCIwmC9Vq0aiQQDQuK+VgQPDXV9hCJjBwcFYU5pLwwHXQcMKSmNLQcIAExlbH8JBwttaX0ABAcNbWVbKyEAIfkECQoAAAAsAAAAABAAEAAABXkgIAICSRBlOY7CIghN8zbEKsKoIjdFzZaEgUBHKChMJtRwcWpAWoWnifm6ESAMhO8lQK0EEAV3rFopIBCEcGwDKAqPh4HUrY4ICHH1dSoTFgcHUiZjBhAJB2AHDykpKAwHAwdzf19KkASIPl9cDgcnDkdtNwiMJCshACH5BAkKAAAALAAAAAAQABAAAAV3ICACAkkQZTmOAiosiyAoxCq+KPxCNVsSMRgBsiClWrLTSWFoIQZHl6pleBh6suxKMIhlvzbAwkBWfFWrBQTxNLq2RG2yhSUkDs2b63AYDAoJXAcFRwADeAkJDX0AQCsEfAQMDAIPBz0rCgcxky0JRWE1AmwpKyEAIfkECQoAAAAsAAAAABAAEAAABXkgIAICKZzkqJ4nQZxLqZKv4NqNLKK2/Q4Ek4lFXChsg5ypJjs1II3gEDUSRInEGYAw6B6zM4JhrDAtEosVkLUtHA7RHaHAGJQEjsODcEg0FBAFVgkQJQ1pAwcDDw8KcFtSInwJAowCCA6RIwqZAgkPNgVpWndjdyohACH5BAkKAAAALAAAAAAQABAAAAV5ICACAimc5KieLEuUKvm2xAKLqDCfC2GaO9eL0LABWTiBYmA06W6kHgvCqEJiAIJiu3gcvgUsscHUERm+kaCxyxa+zRPk0SgJEgfIvbAdIAQLCAYlCj4DBw0IBQsMCjIqBAcPAooCBg9pKgsJLwUFOhCZKyQDA3YqIQAh+QQJCgAAACwAAAAAEAAQAAAFdSAgAgIpnOSonmxbqiThCrJKEHFbo8JxDDOZYFFb+A41E4H4OhkOipXwBElYITDAckFEOBgMQ3arkMkUBdxIUGZpEb7kaQBRlASPg0FQQHAbEEMGDSVEAA1QBhAED1E0NgwFAooCDWljaQIQCE5qMHcNhCkjIQAh+QQJCgAAACwAAAAAEAAQAAAFeSAgAgIpnOSoLgxxvqgKLEcCC65KEAByKK8cSpA4DAiHQ/DkKhGKh4ZCtCyZGo6F6iYYPAqFgYy02xkSaLEMV34tELyRYNEsCQyHlvWkGCzsPgMCEAY7Cg04Uk48LAsDhRA8MVQPEF0GAgqYYwSRlycNcWskCkApIyEAOwAAAAAAAAAAAA==" alt="Loading..." />

(注: 上記はAjaxLoadからの実際の読み込みスピナーです)

最も読みやすいわけではないかもしれませんが、ドキュメントに確実に読み込まれています。シンプル（〜2Kb未満）であると仮定すると、パフォーマンスにはまったく影響しません。

于 2013-05-29T09:45:41.427 に答える
1

頭の中に大規模なブロック JavaScript がないことを確認する必要があります。すべての JavaScript をページの下部に移動します。また、コードが適切に記述されている場合はスクリプトに async 属性を設定し、そうでない場合は defer 属性を設定します。

これが完了したら、読み込み画面が本体の最初の要素であることを確認します。これにより、リソースが早い段階で取得されます。ロード アニメーションの前に多数の CSS ロード、フォントなどがある場合、ブラウザのアウトバウンド接続が他のダウンロードによって飽和状態になるため、画像のダウンロードが遅れる原因となります。そのため、ダウンロード数を最小限に抑えるか、重要な領域よりも少なくするか、非同期アセット ローダーを使用してオンデマンドでフェッチするようにしてください。

他のアセットがロード アニメーションの表示を妨げないようにする最善の方法は、html 内のすべての関連部分をインライン化することです。読み込み画面の html のすぐ上に css をインライン化し、場合によっては gif ソースを base64 エンコードされたデータ URI としてインライン化します。

于 2013-05-29T10:40:22.250 に答える
0

これをhtmlに書きましたが、動作します。ただし、それらを別のファイルに入れることをお勧めします

<style>
.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url("http://smallenvelop.com/wp-content/uploads/2014/08/Preloader_8.gif") center no-repeat #fff;

} 

<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script>

<script>
$(window).load(function() {
    // Animate loader off screen
    $(".se-pre-con").fadeOut("slow");;
});
</script>

<div class="se-pre-con"></div>'
于 2015-08-30T14:47:25.660 に答える
0

との別々のインスタンスを使用document.readyするwindow.load

例：

HTML

<img id="test" src="very_tiny_loading_img.gif" alt="Loading..." />
<img src="vary_large_img.jpg" />

JS

$(document).ready(function() {
 // executes when HTML-Document is loaded and DOM is ready
 alert("document is ready");
});
$(window).load(function(){
 // executes when complete page is fully loaded, including all frames, objects and images
 alert("window is loaded");
 $('#test').fadeOut();
});

アラートで作業する（コードに置き換えてください）

http://jsfiddle.net/3f2VS/

注: 私は @hexblot をフィドルで使用して img をロードします。

于 2013-05-31T08:33:36.203 に答える