javascript - プリローダーはページをプリロードせず、2 回目にロードします

Question

この素敵な jQuery preloader/progress barを見つけましたが、想定どおりに動作させることができません。問題は、最初にページが読み込まれ、ページ全体が読み込まれた後、0%-100% のバーがすぐに表示され、その後、ページが再度リロードされることです。そのため、ページが読み込まれる前に進行状況バーが表示されず、ページが再度読み込まれます。

ここに私の実装コードがあります:

<head>
    <script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
    <script src="js/jquery.queryloader2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("body").queryLoader2();
        });
    </script>
</head>
<body>
    My content...No other reference in here for the Jquery preloader
</body>

事前に助けてくれてありがとう。

score 3 · Accepted Answer

私はここで非常に間違っている可能性がありますが、私の意見では：

プラグインに欠陥があります。
ページにリダイレクトの原因となる問題があります。

テストフィドルを作成したところ、次のことがわかりました。

ページに画像がない場合、画像要素にのみバインドされているため、プラグインのプライベート関数completeImageLoading(); は呼び出されません。画像がない場合 -> バインディングがない -> トリガーがない -> 何も完了しない -> 実行されていないフィドルによって示されるように、オーバーレイ 0% のままになります (ページが実行されていない場合、jsfiddle は相対画像を表示しません)。 .
プラグインはリモートイメージを考慮しません。したがって、そのように宣言する<img src="http://example.com/image.jpg">と、プラグインがそれらを認識しないため、機能しません。実際$.ajax、別のドメインにアクセスしようとすると、明らかにエラーを生成する画像をロードするために使用しています。
プラグインはページをリロードしません (少なくとも Google Chrome では)... フィドルでコンソールの出力を確認してください。[実行] をクリックするたびに、メッセージが 1 回表示されます。

提案:

プラグインを動作させるには、少なくとも 1 つの相対イメージまたは背景イメージ(背景はテストしていませんが...) を提供してください。
もっとコードを見せてください。フィドルは、プラグインがページのリロードを引き起こさないことを示しています(少なくとも Chrome では... 別のブラウザーを使用していますか?)。ここに干渉するのはあなたが作ったものに違いありません。
プラグインのいくつかのオプションを指定します (何もない場合は奇妙な動作をします)。

プリローダーに関する編集

プリローダーについて...進行状況の表示が必須でない場合は、window.onloadトリックを使用できます。DOM の準備ができ$(...)たら、「お待ちください...」メッセージと、必要に応じてアニメーションを含む不透明なページオーバーレイを作成します。次に、「ドキュメントの読み込みプロセスの最後に発生する...ドキュメント内のすべてのオブジェクトがDOMにあり、すべての画像とサブフレームの読み込みが完了したときに発生する」window.onloadイベントを待ちます。トリガーされたら、オーバーレイを削除するだけで出来上がり - ページの準備が整いました!window.onload

プリローダーに関する編集2

実際、あなたも必要ありません$(...)...私は一体何を考えていたのですか？html にオーバーレイ (一意の ID を持つ単純な div) を作成し、画面いっぱいになるようにスタイルを設定しz-index:1337、ページ全体を覆うように CSS 属性を指定するだけです。次に、window.onload で:

window.onload = function () {
    // Grab a reference to your overlay element:
    var overlay = document.getElementById('myOverlay');
    // Check if the overlay really exists
    // and if it is really appended to the DOM,
    // because if not - removeChild throws an error
    if (overlay && overlay.parentNode && overlay.parentNode.nodeType === 1) {
        // Remove overlay from DOM:
        overlay.parentNode.removeChild(overlay);
        // Now trash it to free some resources:
        overlay = null;
    }
};

もちろん、これは実際にはプリローダーではなく、単なる模倣です。

これは、あなたが遊ぶことができる実用的なフィドルです。

PS私は個人的にプリローダーを高く評価していませんが、それは私だけです...

score 1 · Accepted Answer

これを試してください（document.readyイベントを削除して、これを呼び出すだけです）：-

<script type="text/javascript">         
            $("body").queryLoader2();
</script>

javascript - プリローダーはページをプリロードせず、2 回目にロードします

2 に答える 2

Related

Reference