BinaryDevelop
  1. ホーム
  2. jquery

[解決済み] jQuery に何かを実行する前にすべての画像の読み込みを待つように指示する公式な方法

2022-03-15 05:46:52

質問

これを実行するとjQueryでは。 

$(function() {
   alert("DOM is loaded, but images not necessarily all loaded");
});

DOMが読み込まれるのを待ち、コードを実行します。もしすべての画像が読み込まれていない場合でも、コードは実行されます。これは明らかに、要素の表示や非表示、イベントのアタッチなど、DOM を初期化する場合に必要なものです。

しかし、例えば、アニメーションを行いたい場合、すべての画像が読み込まれるまでアニメーションを実行させたくないとします。jQueryでこれを行う公式の方法はありますか？

私が持っている最も良い方法は <body onload="finished()"> でも、どうしても必要なとき以外は、あまりやりたくないんです。

注 jQuery 1.3.1でのバグ の中のコードを実行する前に、すべての画像が読み込まれるのを実際に待つことになります。 $function() { } . そのため、そのプラットフォームを使用している場合、上記の正しい動作ではなく、私が求めている動作が得られることになります。

解決方法は？

jQueryでは $(document).ready() を指定すると、何かを実行します。 DOM が読み込まれ $(window).on("load", handler) で、画像など他のものもすべて読み込まれたときに何かを実行します。

この違いは、次のような完全なHTMLファイルであれば、たくさんの jollyrogerNN JPEGファイル（または他の適切なもの）。 

<html>
    <head>
        <script src="jquery-1.7.1.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                alert ("done");
            });
        </script>
    </head><body>
        Hello
        <img src="jollyroger00.jpg">
        <img src="jollyroger01.jpg">
        // : 100 copies of this in total
        <img src="jollyroger99.jpg">
    </body>
</html>

この場合、画像が読み込まれる前にアラートボックスが表示されますが、これはその時点でDOMの準備が整っているためです。その後、変更した場合。 

$(document).ready(function() {

に入っています。 

$(window).on("load", function() {

が表示されるまで、アラートボックスは表示されません。 後 が読み込まれます。

したがって、ページ全体の準備が整うまで待つには、次のような使い方が考えられます。 

$(window).on("load", function() {
    // weave your magic here.
});

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します