3

jQueryでは、$。ajax関数を使用して、指定されたURLからページのhtmlをロードできることを知っています。ただし、表示する前に、そのページのhtmlとすべてのリソースをロードすることに興味があります。どうすればいいですか？

例：about.htmlというファイルに次のhtmlがあるとします。

<h1>About BigImage</h1>
<img src="/images/reallybigimage.jpg" />

このページに画像があることに注意してください。jQueryのajax関数を使用すると、HTMLの読み込みが完了するとすぐに「成功」​​しますが、画像は取得しません。

ただし、ここにキッカーがあります。ページに何枚/どの画像を含めるかはわかりません。ロードしたい画像だけでなく、ページのすべてのリソースであるcssとすべてです。これを行う方法はありますか？

ありがとう！

4

4 に答える 4

3

成功のコールバック内で、html をドキュメント フラグメントに変換し、プリロードする部分を選択してプリロードします。実際のプリロードを行うコードは含めません。それはそれ自体の問題であり、それを行うためのプラグインが既に存在するためです。

$.ajax(options).done(function(html){
    var $html = $(html),
        imgArr = $.map($html.find("img"),function(img) {
           return this.src;
        }),
        cssArr = $.map($html.find("link"),function(link) {
           return this.href;
        });
    // loop through and preload images and css.
    ...
    // once all are done loading, append to page.
    $("#content").html($html);
});

スクリプトをプリロードする必要はありませんが、コンテンツを追加した後で、スクリプトを切り離して本文に追加することをお勧めします。

于 2012-04-20T19:31:45.350 に答える
1

相対パスが問題にならない場合は、success関数ですべてのリンクを見つけて、次のようにロードすることができます。

//....
success:function(data){
    $("*",data).each(function(){
        if($(this).attr("src")){
            $.ajax({url:$(this).attr("src"),dataType:"text"});
        }
        if($(this).attr("href")){
            $.ajax({url:$(this).attr("href"),dataType:"text"});
        }
    });
}
//....
于 2012-04-20T19:31:32.840 に答える
1

それは、何をダウンロードしているか (またはそのフォーマットについてどれだけ確信があるか) によって異なります。また、何をダウンロードするかによっても異なります。

たとえば、 のような RegExp を使用できます/<img[^>]*src(["'])([^"']+)\1[^>]*>/g。次に、のようなキャッチ関数を簡単に使用できますfunction (a, q, src){var i = new Image(src)}。

ダウンロードしたドキュメント フラグメントを DOM ドキュメント フラグメントに添付して、DOM で作業することもできます。これにより、より多くのリソースが消費される可能性があります。

于 2012-04-20T19:38:58.370 に答える
0

これを探していますか？

 $("body").load("page.html")

(編集:) それとも、ページの内容を変数に保存しますか? これは $.ajax で可能です:

     $.ajax({
      url: "page.html",
      dataType: 'html',
      success: function(data) {
var pagecontents = data;

}
    });
于 2012-04-20T19:25:05.507 に答える