使用 AJAX 为 AJAX 预加载图像答案

【问题标题】：Preloading images with AJAX for AJAX使用 AJAX 为 AJAX 预加载图像
【发布时间】：2014-01-20 19:53:13
【问题描述】：

我的网站结构是顺序的（如 page1.html 导致 page2.html，page2.html 导致 page3.html 等）。我想从第二页的第三页预加载一些图像。我在 SO 上找到了这段精彩的代码：

$.ajax({
    url      : 'somePage.html',  
    dataType : "html",
    success  : function(data) {

        $(data).hide().appendTo('#someDiv');

        var imagesCount = $('#someDiv').find('img').length;
        var imagesLoaded = 0;

        $('#someDiv').find('img').load( function() {
            ++imagesLoaded;
            if (imagesLoaded >= imagesCount) {
                $('#someDiv').children().show();
            }
        });

        var timeout = setTimeout(function() {
            $('#someDiv').children().show();
        }, 5000);
    }                     
});

它在将 page3.html 的全部内容转储到 page2.html 时效果很好。问题是，我不想要全部内容；我只想要图像，我希望它们隐藏起来，并在用户实际加载 page3.html 时做好准备。上面的 sn-p 带来了音频，以及随之而来的一切。所以我的问题是，下面这个破解版是否可以满足我的目的？

$.ajax({
    url      : 'page3.html',  
    dataType : "html",
    success  : function(data) {

        var imagesCount = $(data).find('img').length;
        var imagesLoaded = 0;

        $(data).find('img').load( function() {
            ++imagesLoaded;
            if (imagesLoaded >= imagesCount) {
              //halt? do something?
            }
        });

    }                     
});

同样，我想要的只是将 page3.html 的图像预加载到 page2.html 上。这会奏效吗？我该如何测试来验证？

【问题讨论】：

标签： javascript jquery html css ajax

【解决方案1】：

我相信，就您而言，最简单的方法就是使用 jQuery.get 并指定要预加载的图像（或任何其他对象）。

例如，

$.get('images/image1.jpg');
$.get('images/image2.jpg');
// etc

这样，您可以指定要在浏览器中预加载下一页的哪些图像。

$.get 函数只是 $.ajax 函数的缩写版本。在您的情况下，您只想“获取”图像，以便它们位于浏览器的缓存中，以便当您到达下一个 html 页面时，图像已经加载。

如何验证

如果您要将上面的示例代码添加到您的页面 2，然后在 Firebug 或 Chrome 开发工具中打开“网络”选项卡的同时访问该页面，您将看到针对图像发送的 GET 请求并已加载到浏览器的缓存。

【讨论】：