Pour la gallerie d’images php Bizou, j’ai cherché différentes manière de précharger l’image suivante pour le mode “visualisation” (exemple).
Sous Firefox, c’est très simple. Il suffit d’utiliser la balise suivante pour que le navigateur précharge les contenus indiqués.
Les contenus sont préchargés en arrière-plan une fois que la page courante est chargée intégralement.
[html] <link rel="prefetch" href="/images/nextimage.jpg" />
Sauf que pour le moment seul Firefox supporte cette fonctionnalité.
Note : un ticket est ouvert sur le sujet pour le projet Chromium.
Pour les autres navigateurs que Firefox, il faut utiliser du Javascript déclenché à l’événement window.onload :
[javascript]
<script type="text/javascript">
window.onload = function() {
// pour les images
var im = new Image();
im.src = '/images/nextimage.jpg';
// et pour les autres contenus
var req = new XMLHttpRequest();
req.open('GET', 'nextpage.php', false);
req.send(null);
};
</script>
Attention aux en-têtes HTTP de cache envoyés par le serveur vers le navigateur.
Pour un préchargement efficace de page PHP, il faudra que votre script envoie un en-tête Expires.
header('Expires: '.gmdate('D, d M Y H:i:s \G\M\T', time() + 3600));
Enfin, pour une détection simple du navigateur depuis le script PHP :
<?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 } ?>
Liens :