0

というわけで、背景をいくつか。

ページのコンテンツ全体をカバーする iOS スピナーと白い画面でオーバーレイをセットアップしたモバイル Web サイトがあります。document.ready では、スピナーとスクリーンがすぐに表示され、ページのコンテンツが完全に読み込まれるまで表示されます。この時点で、スクリーンとスピナーがフェードアウトしてページのコンテンツが表示されます。

これはすべてうまくいきます。ただし、ページが十分に速く読み込まれる場合は、スクリプトを少し洗練して、オーバーレイとスピナーを表示したくありません。これらのページの多くは非常に軽量であり (ユーザーが以前にアクセスしたことがある場合は、以前にキャッシュされていた)、スピナーとオーバーレイを 1 秒以下の瞬間的に点滅させることは役に立たず、混乱を招く可能性があります。ただし、ページの読み込みに数秒以上かかる場合は、これを使用すると大きな価値があります。

ページの読み込みに 1 秒以上かかる場合にのみ、スクリプトを実行する方法を見つけようとしています。最初は、スクリプトの実行を 1 秒待つように単純に指示できると思っていましたが、そうすることで、DOM がページの html 構造を構築するときに、コンテンツのフラッシュがユーザーに表示されます。 t は 1 秒以内にファイナライズされます。

これは明らかにユーザーを混乱させ、容認できません。

これを調べる別の方法は、「ページがキャッシュされているか、すぐに読み込まれる場合は、スピナーとオーバーレイを表示しないでください。それ以外の場合は、先に進んで表示してください。」

これを達成する方法はありますか？

これが私が現在使用しているコードです（これはjqueryとspin.jsを利用しています）：

// invoke spin.js
$(document).ready(function() {

    var $overlayScreen = $('<div id="pageLoader" class="overlay pageLoad"></div>');
    $('body').append($overlayScreen);

    var opts = {
      lines: 13, // The number of lines to draw
      length: 7, // The length of each line
      width: 4, // The line thickness
      radius: 10, // The radius of the inner circle
      rotate: 0, // The rotation offset
      color: '#000', // #rgb or #rrggbb
      speed: 1, // Rounds per second
      trail: 60, // Afterglow percentage
      shadow: false, // Whether to render a shadow
      hwaccel: true, // Whether to use hardware acceleration
      className: 'spinner', // The CSS class to assign to the spinner
      zIndex: 2e9, // The z-index (defaults to 2000000000)
      top: 'auto', // Top position relative to parent in px
      left: 'auto' // Left position relative to parent in px
    };
    var target = document.getElementById('pageLoader');
    var spinner = new Spinner(opts).spin(target);
});

// check to see if the page has loaded yet.  If it has, hide the loader div
$(window).load(function() {
    $('#pageLoader').addClass('loadComplete');
});
4

1 に答える 1

1

問題は、ページが読み込まれる前にページの読み込みにかかる時間を確認する方法がないことです。これを行う唯一の方法は、ローディング スピナーの表示に約 1 ～ 1.5 秒の遅延を設定し、スピナーが表示される前にページのロードが完了した場合にその遅延をクリアすることです。これは、これが実行できると私が考えることができる唯一の方法です。

$(document).ready(function() {
    var overlayTimer = setTimeout(function() { 
        $('<div id="pageLoader" class="overlay pageLoad"></div>').appendTo('body');
    }, 1500);

    // other code for the spinner here

    $(window).load(function() {
        clearTimeout(overlayTimer);
        $('#pageLoader').addClass('loadComplete');
    });
});

それがあなたの必要な状況に合うと私が考えることができる唯一のものです. 表示する必要がある場合、スピナーが表示されるまでに 1.5 秒の遅延がまだあるため、最善の解決策ではありません。

于 2012-08-08T23:22:04.263 に答える