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时等待超过必要的时间。

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

qTip2 - 一次加载所有AJAX站点

1 个答案: