JQueryプリロードページ

私の問題は非常に単純です、私はdivにそれらを表示する前にページをプリロードしたいと思います

インデックスページにメインのdivがあります:#data_div

私はそのDivに多くのイメージを持つページを読み込みます...(イメージだけでなく、多くのマークアップも)

私はページをプリロードするために別のdivを使用しますが、そのdivは表示されません(しかし、ロードされたデータの適切な書式設定を維持するために隠されているわけではありません):#data_loading;

私はシンボルをロードするためにdivを使用します:#wait_div

私は、私はJQueryロード(イベント、ロードメソッドではない)のajax相当する必要があると思う しかし私はdiv(...)にこのイベントを設定することはできませんので、私は別の解決策が必要です

        $.address.change(function(event) {
                    $("#wait_div").show();

                    if(event.value == "/") {
                        $.address.value("index.php");
                    } else if(event.value.substr(1, 5) == "Datas") {
                        $("#data_loading").load(event.value, {
                            'ajax' : 'true'
                        },function(){

    /* i would like that this occur only when the page is fully loaded 
(including image and scripts) inside the temp div */
                           $("#data_div").children().remove();
                           $("#wait_div").hide();
                           $("#data_loading").children().appendTo($("#data_div")).fadeIn(1000);
                                //alert("done");
                            });
                        });
                    }
                });
0
ありがとうが、私は個々の画像をロードしたくないだけで、私のdivはそれを表示する前に完全にレンダリングする必要があります(それもスクリプトを含む)
追加された 著者 guillaume,
ちょっと感謝、少なくとも画像のためのトリックを行う
追加された 著者 guillaume,
この回答はどうですか? ヒント する必要があります。 - その他の回答も表示します。
追加された 著者 rlemon,
追加された 著者 Nick,

2 答え

質問に答えてこちらをチェックしてください

すべての画像がロードされたときの状況を知っていることは、あなたの新しいページで、あなたのtemp div内の画像にクラスを与え、次のようなことをすることができます:

  $(document).ready(function(){
    var imgs = $("img.tempDivImages"), cnt = imgs.length;

    imgs
    .load(function(){
      if(!--cnt) {
        /* all images loaded */
        /* now call the function you want when everything is loaded*/
      }
    })
    .error(function() { /* whoops an image failed to load */});
  });

これは、あなたの関数の呼び出しやtemp div内のすべてがロードされたときに何かをする方法です。

1
追加された
それに感謝します!
追加された 著者 guillaume,

私は別の質問(jQueryではなくJavaScript)でこれに答えました:

注意:HTMLで読み込みメッセージを追加し、preload()関数の最後に読み込みメッセージを非表示にすることができます。

JavaScript

function preload() {
    imageObj = new Image();
    images = new Array();
    images[0] = 'img/1.png';
    images[1] = 'img/2.png';
    images[2] = 'img/3.png';
    images[3] = 'img/4.png';
    images[4] = 'img/5.png';

    for (i = 0; i <= 4; i++)
        imageObj.src = images[i];
}

HTML

<body onload="preload();">
    ....

    <!--[if IE]>
        <div id="preload">
            
            
            
            
            
        </div>
    

IEのCSS

#preload {
   position: absolute;
   overflow: hidden;
   left: -9999px; 
   top: -9999px;
   height: 1px;
   width: 1px;
}
0
追加された
お返事ありがとうございますが、私はseparatly、私はちょうど私の "ページ"が完全にロードされているイベントを発生させたい画像をロードしたくない... ...
追加された 著者 guillaume,
PHP - 日本のコミュニティ [ja]
PHP - 日本のコミュニティ [ja]
4 参加者の

このグループではPHPについて話します。 パートナー:kotaeta.com