Loading page

**jovdev** · 04/06/2012, 18h52

Re : Loading page

Bonsoir,

Pas sur que tu trouves la réponse sur ce forum !!!

Il s'agit d'une extension spécifique (la réponse est plus probablement chez eux)

Cordialement,
Joël

**ghazal** · 04/06/2012, 19h31

Re : Loading page

Salut,
c'est un plugin basé sur un script Mootools de David Walsh

Introducing LazyLoad 2.0 Example

http://davidwalsh.name/dw-content/lazyload-2.0.php

I've created LazyLoad, a customizable MooTools plugin that allows you only load images when the user scrolls down near them.

dont l'effet est simplement de retarder le chargement des images (qd il y en a beaucoup) et les faire apparaitre en "fade".
Vu le code (du plug) il n'y a rien à faire de spécial si ce n'est activer l'extension et exclure des éléments dans le paramètrage si il y a besoin.

**jovdev** · 04/06/2012, 19h40

Re : Loading page

Dans le pire des cas, si ghazal a raison (j'espère), j'ai bien fait de remonter ce fil

**zenxav** · 04/06/2012, 19h44

Re : Loading page

En cherchant un peut, j'ai trouvé ce code que j'ai testé et qui marche, sauf que je suis nul en php, et du coup je n'arrive pas à changer certaines choses qui me gène. Il est mis dans l'index du template. Ce qui me gène et que je ne sais pas retirer, c'est le fait que l'image loader apparait dans un cadre et il n'est pas au centre de l'écran, de plus il apparait derrière le texte. J'aimerai le mettre au centre et sans cadre, et si possible devant le texte.

Je l'ai trouvé sur ce site nartconcept

En plus c'est un script fais pour joomla.

Voilas le script en question, et encore un grand merci de votre aide.

Ouvrez le fichier index.php de votre template Joomla et rajouter ce code entre les balises <head> et </head>

.<script type="text/javascript">
2.function hideLoading() {
3.document.getElementById('pageIsLoading').style.d isplay = 'none';
4.}
5.</script>

puis juste après la balise <body> ajouter ce code
01.<div id="pageIsLoading"
02.style="
03.position: absolute;
04.display: block;
05.padding-left: 44px;
06.padding-right: 12px;
07.width: auto;
08.height: 46px;
09.line-height: 46px;
10.border: 1px solid #890000;
11.color: #000000;
12.font-weight: bold;
13.background-color: #e5e5e5;
14.background-image: url(http://www.nartconcept.fr/loading.gif);
15.background-position: 6px center;
16.background-repeat: no-repeat;">
17.<script type="text/javascript">
18.if (typeof window_width == 'undefined' || typeof window_height == 'undefined') {
19.var window_width;
20.var window_height;
21.if( typeof( window.innerWidth ) == 'number' ) {
22.window_width = window.innerWidth;
23.window_height = window.innerHeight;
24.} else if( document.documentElement &&
25.( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
26.window_width = document.documentElement.clientWidth;
27.window_height = document.documentElement.clientHeight;
28.} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
29.window_width = document.body.clientWidth;
30.window_height = document.body.clientHeight;
31.}
32.}
33.var left = Math.round((window_width - 200) / 2);
34.var top = Math.round(((window_height - 46) / 3) + 46);
35.document.getElementById('pageIsLoading').style. left = left+'px';
36.document.getElementById('pageIsLoading').style. top = top+'px';
37.</script>
38.Chargement... Veuillez patientez...
39.</div>

Bien entendu, vous pouvez modifier à votre convenance les paramètres d'affichage et le texte, ainsi que l'url de l'image.

Pour terminer, rajoutez le code suivant, à la fin de votre page index.php, juste avant la balise </body>
01.<script type="text/javascript">
02.if (window.addEventListener) {
03.window.addEventListener('load', hideLoading, false);
04.} else if (window.attachEvent) {
05.var r = window.attachEvent("onload", hideLoading);
06.} else {
07.hideLoading();
08.}
09.</script>

**ghazal** · 04/06/2012, 20h04

Re : Loading page

Ce n'est pas du Mootools, c'est du pur JS.
Et tant mieux si ca marche comme tu veux.

euh, si tu veux nous communiquer du code, c'est mieux d'enlever les numérotations de ligne ....

NB: et évite de loader ton image chez nartconcept ...
14.background-image: url(http://www.nartconcept.fr/loading.gif);

**zenxav** · 04/06/2012, 20h18

Re : Loading page

Envoyé par ghazal Voir le message

Ce n'est pas du Mootools, c'est du pur JS.
Et tant mieux si ca marche comme tu veux.

euh, si tu veux nous communiquer du code, c'est mieux d'enlever les numérotations de ligne ....

NB: et évite de loader ton image chez nartconcept ...
14.background-image: url(http://www.nartconcept.fr/loading.gif);

Je sais que c'est du JS, j'ai trouvé ça entre temps, pour l'image j'en ai déjà une de prete et bien sûr je ne comptais pas utiliser celui de nartconcept.

Donc voilas je vous redonne le script sans les numéros de ligne, je l'avais c'est vrais copié tel quel.

__________________________________________________ _______________________________________

Modifier le template de Joomla

Ouvrez le fichier index.php de votre template Joomla et rajouter ce code entre les balises <head> et </head>

<script type="text/javascript">
function hideLoading() {
document.getElementById('pageIsLoading').style.dis play = 'none';
}
</script>

puis uste après la balise <body> ajouter ce code

<div id="pageIsLoading"
style="
position: absolute;
display: block;
padding-left: 44px;
padding-right: 12px;
width: auto;
height: 46px;
line-height: 46px;
border: 1px solid #890000;
color: #000000;
font-weight: bold;
background-color: #e5e5e5;
background-image: url(http://www.nartconcept.fr/loading.gif);
background-position: 6px center;
background-repeat: no-repeat;">
<script type="text/javascript">
if (typeof window_width == 'undefined' || typeof window_height == 'undefined') {
var window_width;
var window_height;
if( typeof( window.innerWidth ) == 'number' ) {
window_width = window.innerWidth;
window_height = window.innerHeight;
} else if( document.documentElement &&
( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
window_width = document.documentElement.clientWidth;
window_height = document.documentElement.clientHeight;
} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
window_width = document.body.clientWidth;
window_height = document.body.clientHeight;
}
}
var left = Math.round((window_width - 200) / 2);
var top = Math.round(((window_height - 46) / 3) + 46);
document.getElementById('pageIsLoading').style.lef t = left+'px';
document.getElementById('pageIsLoading').style.top = top+'px';
</script>
Chargement... Veuillez patientez...
</div>

Bien entendu, vous pouvez modifier à votre convenance les paramètres d'affichage et le texte, ainsi que l'url de l'image.

Pour terminer, rajoutez le code suivant, à la fin de votre page index.php, juste avant la balise </body>
<script type="text/javascript">
if (window.addEventListener) {
window.addEventListener('load', hideLoading, false);
} else if (window.attachEvent) {
var r = window.attachEvent("onload", hideLoading);
} else {
hideLoading();
}
</script>

Reste qu'à mettre le fichier loading.gif ci-joint à la racine de votre site et admirer le fruit de votre travail

Loading page

Loading page

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Commentaire

Annonce

Partenaire de l'association