For the Bizou php gallery, I looked for different ways of preloading next image in “view” mode (example).
With Firefox it’s very simple. Just use the following element and the browser will preload your contents.
Contents are preloaded in background, once the whole current page is loaded.
[html] <link rel="prefetch" href="/images/nextimage.jpg" />
Problem: only Firefox supports this currently.
Note: a ticket is opened about this in the Chromium project.
For other browsers, use some Javascript triggered by the window.onload event:
[javascript]
<script type="text/javascript">
window.onload = function() {
// for images
var im = new Image();
im.src = '/images/nextimage.jpg';
// and for other content
var req = new XMLHttpRequest();
req.open('GET', 'nextpage.php', false);
req.send(null);
};
</script>
Beware of HTTP cache headers sent by the server to the browser.
To preload correctly PHP pages, make your script send an Expires header:
header('Expires: '.gmdate('D, d M Y H:i:s \G\M\T', time() + 3600));
Then, for a simple browser detection from your PHP script:
<?php if (strpos($_SERVER['HTTP_USER_AGENT'], 'Firefox') !== false) { ?>
<link rel="prefetch" href="nextpage.php" />
<?php } else { ?>
<script type="text/javascript">
window.onload = function() {
var req = new XMLHttpRequest();
req.open('GET', 'nextpage.php', false);
req.send(null);
};
</script>
<?php } ?>
Links :