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 回答