jQueryでページHTMLやコンテンツ（画像など）を読み込む方法は？

Question

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

例： は私がこのページにイメージを持っている

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

お知らせabout.htmlと呼ばれるファイルに次のHTMLを持っていると言います。 jQueryのajax関数を使用すると、HTMLが読み込まれるとすぐに「成功」​​しますが、画像はロードされません。

これはキッカーです：私はページ内にどれくらいのイメージがあるのか​​分かりません。読み込みたいイメージだけではありません。すべてのページのリソースです。 。 これを行う方法はありますか？

ありがとうございます！

Answer 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"}); 
     } 
    }); 
} 
//.... 

Answer 2

これはお探しですか？

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

（編集:) それとも、変数にpagecontentを保存したいですか？これは、$アヤックスで可能です：

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

} 
    }); 

Answer 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); 
}); 

あなたがコンテンツを追加した後、しかし、あなたがそれらを切り離し、身体にそれらを追加したい場合、スクリプトをプリロードする必要はありません。

Answer 4

ダウンロードする内容（またはフォーマットについての確信度）によって異なります。また、ダウンロードしたいものによって異なります。

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

ダウンロードしたドキュメントフラグメントをDOMドキュメントフラグメントに添付し、DOMでそれを処理することもできます。これはより多くの資源を消費するかもしれません。