I'm using the qTip2 library, and I'm using their AJAX retreival functions, based on this: http://jsfiddle.net/L6yq3/1861/. I updated their HTML to include multiple links to better exemplify my question.
Basically, the way it works now is that when you hover your mouse over any of the links, qTip2 uses AJAX to load some JSON from the link you provide it with. If you hover over the same link a second time, the browser pulls the JSON from its cache, and not from the internet.
This is the exact functionality I want, except that the initial load can be slow depending on the response time of the server. Is there a way to load the page, then begin to queue up all of the AJAX requests and cache all of their responses in the background, without hovering?
Please let me know if you need any more information, and I would be happy to clarify.
StackOverflow requires me to paste code when using jsfiddle.net, so below is the javascript which is run within the jsfiddle:
$(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'
});
});
});
You can trigger the ajax yourself and set the qtip content when it completes.
Try this - see here: 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});
}
});
});
})
Note: If your ajax is loading slowly, and you have lots of qtip's on the page, this may lead to a user waiting more than necessary when viewing a qtip that is at the end of the queue.
A smarter solution would be to manage your own queue of downloads, and when the user requires one that isn't loaded yet then move it to the start of the queue so it will be ready asap. This may be necessary when preloading assets such as videos, music, games, etc... - but I guess it would be an overkill for tooltips.