如何在jQuery中加载页面html和内容（如图像）？

In jQuery, I know I can use the $.ajax function to load a page's html from a given URL. However, I'm interested in loading the htmla nd all resources on that page before displaying it. How would I go about doing that?

在jQuery中,我知道我可以使用$ .ajax函数从给定的URL加载页面的html。但是,我有兴趣在显示它之前加载htmla和该页面上的所有资源。我该怎么做呢?

Example: Say I have the following html in a file called about.html

示例:假设我在名为about.html的文件中有以下html

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

Notice that I have an image in this page. Using jQuery's ajax function, I would get a "success" as soon as the HTML finished loading, but not the image.

请注意,我在此页面中有一个图像。使用jQuery的ajax函数,我会在HTML完成加载后获得“成功”,但不是图像。

Here's the kicker, though: I don't know how many/which images I'll have in the page, and it's not just images I want to be loading -- it's all the page's resources -- css and all. Any way to do this?

不过这是踢球者:我不知道我在页面中会有多少/哪些图像,而不仅仅是我想要加载的图像 - 这是所有页面的资源--css和所有。有什么办法吗?

Thanks!

4 个解决方案

#1

If relative paths are not a problem, in your success function, you can then attempt to find all of the links and load them like this:

如果相对路径不是问题,那么在您的成功函数中,您可以尝试查找所有链接并加载它们,如下所示:

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

#2

Within the success callback, convert the html to a document fragment, then select the pieces of it that you wish to preload and preload them. I won't include the code to do the actual pre-loading because that should be a question of it's own and there are plugins that already exist to do just that.

在成功回调中,将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);
});

You shouldn't need to preload the scripts, however you may want to detach them and append them to the body after you append the content.

您不需要预加载脚本,但是在添加内容后,您可能需要将它们分离并将它们附加到正文中。

#3

That depends on what you are downloading (or how sure you are about the format). It also depends on what do you want to download.

这取决于您下载的内容(或者您对格式的确定程度)。这还取决于你想要下载什么。

You could for example use RegExp like /<img[^>]*src(["'])([^"']+)\1[^>]*>/g. Then you could simple use a catching function like function (a, q, src){var i = new Image(src)}.

例如,您可以使用RegExp,如/ 如何在jQuery中加载页面html和内容（如图像）？ ] * src([“'])([^”'] +)\ 1 [^>] *> / g。然后你可以简单地使用像函数(a,q,src){var i = new Image(src)}这样的捕获函数。

You could also attach the downloaded document fragment to DOM document fragment and work on it with DOM. This might consume more resources thou.

您还可以将下载的文档片段附加到DOM文档片段并使用DOM进行处理。这可能会消耗更多的资源。

#4

Are you looking for this?

你在找这个吗?

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

(edit:) Or do you want to store the pagecontent into a variable? This is possible with $.ajax:

(编辑:)或者您想将pagecontent存储到变量中吗? $ .ajax可以实现这一点:

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

}
    });

#1