在 jQuery 中预加载和缓存图像以用于“加载”图标（或任何更好的解决方案）

Question

我正在使用 jQuery 中的dynamic tabs。当用户打开一个新标签页时，内容通过 ajax 加载：

function addTab(tabId) {
    $("#tabs").tabs('add', tabId, tabId);
    $(tabId).load("...");
}

我想在加载内容时显示加载图标。所以我在tabs方法的add属性中设置了tab面板内容：

var $tabs = $("#tabs").tabs({
        tabTemplate: '<li><a href="#{href}">#{label}</a></li>',
        add: function(event, ui) {
            $(ui.panel).append('<div>loading...</div>');
        }
    });

到目前为止效果很好，创建的选项卡内容显示“正在加载...”，然后在获取时替换为正确的内容。

不过，我想做的是显示一张动画加载图像。显然，如果我每次都必须下载该图像，那么它就有点失败了。

我想我需要在 $(document).ready 上将图像后台加载到内存中，然后在需要时将该图像放入我的加载 div 中。我不知道该怎么做。或者也许有一个更简单更好的解决方案？

请注意，可能同时加载多个选项卡，并且并非所有加载选项卡都是可见的（可以在不离开当前选项卡的情况下在后台加载新选项卡），因此只有一个共享 div 可以显示/隐藏最重要的一切都不起作用。

欢迎指点，谢谢。

Answer 1

这可能会有所帮助：

http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript

另外，如果您还没有动画加载图标，这是一个很好的资源：

http://ajaxload.info/