qTip2 -加载所有的AJAX网站一次

Question

我正在使用qTip2库，并且我正在使用它们的AJAX检索函数，基于:http://jsfiddle.net/L6yq3/1861/。我更新了他们的HTML，包括多个链接，以更好地说明我的问题。

基本上，它现在的工作方式是当您将鼠标悬停在任何链接上时，qTip2使用AJAX从您提供给它的链接加载一些JSON。如果您再次将鼠标悬停在同一链接上，浏览器将从其缓存中提取JSON，而不是从internet中。

这正是我想要的功能，除了初始加载可能会很慢，这取决于服务器的响应时间。是否有一种方法可以加载页面，然后开始将所有AJAX请求排队，并在后台缓存它们的所有响应，而无需悬停?

如果您需要更多的信息，请告诉我，我很乐意澄清。

StackOverflow要求我在使用jsfiddle.net时粘贴代码，所以下面是在jsfiddle中运行的javascript:

 $(document).ready(function()
 {
     $('a').each(function() {
         $(this).qtip({
            content: {
                text: function(event, api) {
                    $.ajax({
                        url: api.elements.target.attr('href')
                    })
                    .then(function(content) {
                        api.set('content.text', content);
                    }, function(xhr, status, error) {
                        api.set('content.text', status + ': ' + error);
                    });
                    return 'Loading...';
                }
            },
            position: {
                viewport: $(window)
            },
            style: 'qtip-wiki'
         });
     });
 });

Answer 1

您可以自己触发ajax，并在它完成时设置qtip内容。

试试这个-看这里:http://jsfiddle.net/BFrn5/1/

// Create the tooltips only when document ready
 $(document).ready(function()
 {
     // For each 'a' tag:
     $('a').each(function() {
         var $this = $(this);
         // first create qtip with placeholder "loading"
         $this.qtip({
                text: "Loading",
                position: {
                    viewport: $(window)
                },
                style: 'qtip-wiki'
         });
         // then immediately start an ajax request
         $.ajax({
             url: $this.attr('href'), // Use href attribute as URL
             cache: false,
             success: function(content) {
                // Set the tooltip content upon successful retrieval
                // TODO: you may need to repeat the position/style setting here, not sure
                $this.qtip({content: content});
             }, 
             error: function(xhr, status, error) {
                // Upon failure... set the tooltip content to error
                $this.qtip({content: status + ': ' + error});
             }
         });
     });
 })

注意:如果ajax加载缓慢，并且页面上有很多qtip，这可能会导致用户在查看队列末尾的qtip时等待的时间超过必要的时间。

一个更聪明的解决方案是管理你自己的下载队列，当用户需要一个尚未加载的下载时，把它移到队列的开始，这样它就会尽快准备好。在预加载视频、音乐、游戏等资产时，这可能是必要的。-但我想这将是一个多余的工具提示。