Je vous ai parlé de Lazy Load un plugin jQuery permettant de différer le chargement de vos images.
Ici, c’est plus fort puisque c’est tout ou une partie de la page qui va être charger d’un coup d’œil, en ajoutant une sorte de loading en attendant le chargement des éléments qui la compose.
Pour la mise en place, rien de plus simple puisque cela tient en quelques lignes :
[html]
<link rel="stylesheet" href="queryLoader.css" type="text/css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="queryLoader.js"></script>
<script type="text/javascript">
QueryLoader.init();
</script>
[/html]
Et voilà, dans cet exemple c’est toute la page qui sera « préloader ».
Pour « customizer » un peu et ne prendre en compte qu’un seul élément, le paramétrage est lui aussi très simple :
[html]
<script type="text/javascript">
QueryLoader.selectorPreload = "#idOfTheElement";
QueryLoader.init();
</script>
[/html]
La démo (qui vaut le détour) et les sources sur le site officiel.
Lien :
Pas mal et propre.
J’ai une landing page avec beaucoup de visuels dans un projet en cours.
Je vais essayer ça durant un futur test pour voir la réaction des visiteurs. Avec une insertion si et seulement si c’est le premier affichage de la session par contre.