Question

在jQuery中，我知道我可以使用$ .ajax函数从给定的URL加载页面的html。但是，我有兴趣在显示该页面之前加载htmla nd all resources 。我该怎么做呢？

实施例：假设我在名为about.html

的文件中有以下html

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

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

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

谢谢！

Answer 1

在成功回调中，将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 2

如果相对路径不是问题，那么在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 3

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

例如，您可以像/<img[^>]*src(["'])([^"']+)\1[^>]*>/g一样使用RegExp。然后你可以简单地使用像function (a, q, src){var i = new Image(src)}这样的捕获函数。

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

Answer 4

你在找这个吗？

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

（编辑:) 或者您想将页面内容存储到变量中？这可以使用$ .ajax：

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

}
    });

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

4 个答案: