Question

我的网站结构是顺序的（如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时做好准备。上面的片段带来了音频，以及其他所有内容。所以我的问题是，为了我的目的，这个黑客版本是否会起作用？

$.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?
            }
        });

    }                     
});

同样，我想要的只是在page2.html上预先加载page3.html的图片。这会诀窍吗？我该如何测试验证？

Answer 1

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

例如，

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

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

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

如何验证

如果您要将上面的示例代码添加到您的page2，然后在Firebug或Chrome开发工具中打开网络标签页时访问该页面，您会看到为图像发送了GET请求并且它们已加载到浏览器的缓存。

使用AJAX for AJAX预加载图像

1 个答案: