Pour cela on va utiliser jQuery qui est en standard avec SPIP depuis la version 1.9 en s’inspirant de cette technique de jQuery for designer.
On va afficher l’image dans une div ayant pour background un petit loading.gif qu’on peut choper, par exemple, sur ajaxload.info.
On va masquer cette image le temps de son chargement, puis la faire apparaître avec un fade in.
Voici le code à placer dans body : On affiche une image à l’aide d’une boucle SPIP, on lui passe un ID ("image_article"). On ajoute une nouvelle fois l’image dans une balise noscript pour que l’image apparaisse normalement pour les navigateur ayant javascript désactivé.
<BOUCLE_art_img(DOCUMENTS)>
<div id="image_loading" class="loading">
[(#EMBED_DOCUMENT
|inserer_attribut{'title',''}
|inserer_attribut{id,"image_article"}
)]
<noscript>
[(#EMBED_DOCUMENT
|inserer_attribut{'title',''}
)]
</noscript>
</div>
</BOUCLE_art_img>Les CSS : On donne un format (celui de l’image) à la div contenante. On ajoute le loading.gif grace à une class en background centrée en hauteur et largeur. Enfin, on désactive l’affichage de l’image grâce à un display : none.
#image_loading {
width: 661px;
height: 453px;
}
#image_loading.loading {
background: url(../squelettes/images/loading.gif) no-repeat center center;
}
#image_article {
display: none;
}Enfin le script qui doit être placé entre les balises head de votre page : Au chargement complet de la page (pour éviter de voir le chargement de l’image), le javascript désactive la class du loading, et affiche l’image en fade in.
<script type="text/javascript">
$(window).load(function () {
$('#image_loading')
.removeClass('loading');
$("#image_article").fadeIn(600);
});
</script>
© Abel Poucet Webdesign - Motorisé par