1

DOM が完全にロードされるまでに時間がかかる大きなページがあります。ページの読み込み中に小さな読み込みアニメーションを表示するのが良いと思ったので、これを実装しました:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://github.com/Modernizr/Modernizr/raw/master/modernizr.js"></script>
    <script>
        // Wait for window load
        $(window).load(function() {
            // Animate loader off screen
            $("#wait").animate({
                top: -200
            }, 1500);
        });
    </script>

<body>
<div id="wait">
<img src="/assets/images/ajax-loader.gif" />
</div>

（ここにあります）

それは機能しますが、DOM がすでに約 4/5 ロードされている最後の瞬間にのみ機能します。誰かがこれを行うためのより良い方法を知っているかどうかを望んでいましたか?

4

1 に答える 1

1

$(window).load() を使用する代わりに $(document).ready() を試してください。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://github.com/Modernizr/Modernizr/raw/master/modernizr.js"></script>
    <script>
        // Wait for window load
        $(document).ready(function() {
            // Animate loader off screen
            $("#wait").animate({
                top: -200
            }, 1500);
        });
    </script>

<body>
<div id="wait">
<img src="/assets/images/ajax-loader.gif" />
</div>

大きな画像をロードする場合は編集してコードを変更しました。これが役立つことを願っています

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
function showLoading(){
  var $loading = $(".loading");
  var windowH = $(window).height();
  var windowW = $(window).width();

  $loading.css({
    position:"fixed",
    left: ((windowW - $loading.outerWidth())/2 + $(document).scrollLeft()),
    top: ((windowH - $loading.outerHeight())/2 + $(document).scrollTop())
  }).show();
}

function hideLoading(){
   $(".loading").hide();
}

 $(function(){
      showLoading();

      $("#Iframe").load(function(){
        hideLoading();
      }).attr("src", "http://www.somesite.com/images/Purple-Flowers-Wallpaper.jpg");

    });
</script>

<div id="dialog-box">
    <iframe id="Iframe"  src="javascript:void(0);" height="500px" width="800px" ></iframe>
    </div>

<div class="loading">
      <br /><br />
      <div>Loading...</div>
    </div>
于 2012-06-28T04:38:15.183 に答える