javascript - qTip2 - 一次加载所有 AJAX 站点

Question

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

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

这正是我想要的功能，只是初始加载可能会很慢，具体取决于服务器的响应时间。有没有办法加载页面，然后开始对所有 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 时等待超过必要的时间。

更聪明的解决方案是管理您自己的下载队列，当用户需要尚未加载的下载时，将其移至队列的开头，以便尽快准备好。在预加载视频、音乐、游戏等资源时，这可能是必要的……但我想这对于工具提示来说有点过分了。