Afficher javascript à la fin du chargement

piloupliou -  
mpmp93 Messages postés 7217 Statut Membre -
Bonjour,

Sur mon site, j'ai mis une pub. C'est une pub en Javascript.

Comment faire pour qu'elle ne s'affiche qu'à la fin du chargement de ma page (afin de ne pas ralentir le site svp) ?

Je pense qu'il faut mettre ce code en bas de ma page. Mais vu que j'affiche la pub en haut, comment faire ?

A voir également:

3 réponses

Zep3k!GnO Messages postés 2049 Statut Membre 200
 
Il faut gérer ça avec les événements liés au DOM dans Javascript.
Exemple d'un fonction liée au cahrgement du DOM avec le framework JQuery, la fonction ready() : https://api.jquery.com/ready/
0
Boa
 
Hello

Une piste ici : http://api.jquery.com/ready/ et ici http://mootools.net/docs/core/Utilities/DOMReady

Mootools est plus propre, mais moins tenu à jour.

tu dl par exemple Mootools, tu inclus mootools dans ta page, puis tu mets en bas de page :

window.addEvent('domready', function() {
    // ton code ici
});


Bon courage :]
0
mpmp93 Messages postés 7217 Statut Membre 1 340
 
Bonjour,

C'est très simple. Il faut construire sa page avec des blocs css en positionnement absolu. Le bloc contenant votre pub sera donc positionné en absolu là où vous voulez. Exemple:

<header>...tête de page</header>
<article>...corps de page...</article>
<footer>...pied de page...</footer>

votre pub est dans un bloc aside

<aside>...votre pub...</aside>


Chaque bloc header article footer sont positionnés en absolu dans ce style:

article, aside, header, footer, nav {
    display: block;
}

body header {
    position: absolute;
    top: 0px;
    left: 240px;
    width: 800px;
    height: 200px;
    background-image: url('../images/fondEnTetePage.png');
    background-repeat: no-repeat;
    background-position: left;
}

article {
    position: absolute;
    top: 200px;
    left: 240px;
    width: 800px;
    padding-bottom: 40px;
}

body aside {
    position: absolute;
    top: 0px;
    left: 0px;
    padding: 4px;
    width: 232px;
    min-height: 192px;
    background-color: #e1d791;
    font-weight: bold;
    color: black; 
}

body aside + aside { /* second ASIDE dans BODY réservé aux inserts publicitaires */
    position: absolute;
    top: 242px;
    left: 0px;
    width: 232px;
    background-color: white;
    text-align: center;
}



Ici c'est le second aside qui va se positionner sous le premier aside en positionnement absolu. Exemple de site où ceci fonctionne très bien:
https://html5.immo-scope.com/article/

Et si vous invoquez le second aside en fin de page HTML, il ira bien se mettre là où il faut.

A+
-1