Question

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

加载

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

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

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/

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

1 个答案: