Alléger la page en utilisant un JS

[Alrun]

Bonsoir

Le problème qui m'amène concerne du javascript, et du HTML.

Le overhall-header du forum a été modifié, et plus exactement, le header, afin d'avoir à la fois le logo, un header indépendant, et un background. Voici ce à quoi ressemble le template modifié :


Toutefois, étant néophyte avec le js, j'ai dû faire un compromis entre HTML et JS : les liens des différentes images se trouvent sur le template, mais la fonction aléatoire non. J'aimerai alléger un peu le tout (on voit qu'au chargement que ça pop dans tous les sens).

Serait-il possible de faire tenir le tout dans un unique js pour que je remplace le

Code:

<div id="i_bg">...</div>

par un petit

Code:

<script scr="..."></script>

tout en gardant affichée au moins une image si jamais le js fait des siennes (via le template du coup) ?
Sachant que j'ai également du css associé à cet id~

Merci d'avance ! Et n'hésitez pas à me dire si je ne suis pas assez claire

---

lien du forum : http://duralas.forumgratuit.org/

JS aléatoire si ça peut aider :

Code:

$(function() {
          $("#i_bg").each(function() {
            var a = $(this).children();
            a.length && $(this).replaceWith(a[Math.floor(Math.random() * a.length)])
          })
        });

[[Nihil]]

Toutefois, étant néophyte avec le js, j'ai dû faire un compromis entre HTML et JS : les liens des différentes images se trouvent sur le template, mais la fonction aléatoire non.

Si tu regardes le topic Créer une bannière aléatoire ou défilante, tu peux voir qu'ils ont mis la liste des images directement dans le javascript.

Code:

var a = ["http://adresse_image_1", "http://adresse_image_2", "http://adresse_image_3"];

Cette ligne du tutoriel correspond à ta ligne :

Code:

var a = $(this).children();

En fait, il stocke dans la variable a la liste des enfants de #i_bg :
Il stocke donc ceci :

Code:

<div><img src="http://img11.hostingpics.net/pics/7617632301.png"/></div>
<div><img src="http://img11.hostingpics.net/pics/7816447504.png"/></div>
<div><img src="http://img11.hostingpics.net/pics/6956649603.png"/></div>
<div><img src="http://img11.hostingpics.net/pics/5323324602.png"/></div>
<div><img src="http://img11.hostingpics.net/pics/5839154600.png"/></div>
<div><img src="http://img11.hostingpics.net/pics/5890118005.png"/></div>
<div><img src="http://img11.hostingpics.net/pics/7608519606.png"/></div>
<div><img src="http://img11.hostingpics.net/pics/7550494707.png"/></div>
<div><img src="http://img11.hostingpics.net/pics/9116812508.png"/></div>
<div><img src="http://img11.hostingpics.net/pics/2049928409.png"/></div>


Ensuite, il remplace

Code:

<div id="i_bg">
    <div><img src="http://img11.hostingpics.net/pics/7617632301.png"/></div>
    <div><img src="http://img11.hostingpics.net/pics/7816447504.png"/></div>
    <div><img src="http://img11.hostingpics.net/pics/6956649603.png"/></div>
    <div><img src="http://img11.hostingpics.net/pics/5323324602.png"/></div>
    <div><img src="http://img11.hostingpics.net/pics/5839154600.png"/></div>
    <div><img src="http://img11.hostingpics.net/pics/5890118005.png"/></div>
    <div><img src="http://img11.hostingpics.net/pics/7608519606.png"/></div>
    <div><img src="http://img11.hostingpics.net/pics/7550494707.png"/></div>
    <div><img src="http://img11.hostingpics.net/pics/9116812508.png"/></div>
    <div><img src="http://img11.hostingpics.net/pics/2049928409.png"/></div>
</div>

Par l'une des enfants au hasard ce qui donne donc :

Code:

<div><img src="http://img11.hostingpics.net/pics/7816447504.png"/></div>

Normalement tout css sur #i_bg ne sert à rien car l'élément n'existe plus après le javascript

Voici une version de ton javascript :

Code:

$(function() {
    /* Liste des images */
    var a =
    [ 'http://img11.hostingpics.net/pics/7816447504.png',
      'http://img11.hostingpics.net/pics/6956649603.png',
      'http://img11.hostingpics.net/pics/5323324602.png',
      'http://img11.hostingpics.net/pics/5839154600.png',
      'http://img11.hostingpics.net/pics/5890118005.png',
      'http://img11.hostingpics.net/pics/7608519606.png',
      'http://img11.hostingpics.net/pics/7550494707.png',
      'http://img11.hostingpics.net/pics/9116812508.png',
      'http://img11.hostingpics.net/pics/2049928409.png'];
     
    a.length && $('#i_bg').replaceWith('<div><img src="' + a[Math.floor(Math.random() * a.length)] + '"/></div>');
});

Et dans le HTML il te suffit de mettre :

Code:

<div id="i_bg">
    <div><img src="http://img11.hostingpics.net/pics/7617632301.png"/></div>
</div>

Dis moi si cela fonctionne

EDIT :
Petit conseil pour réduire le temps de chargement, tu peux aussi compresser tes images :
Tu peux aller sur un site comme Compressor.io, tu upload ton image, et il va te l'optimiser pour le web
Le site marche vraiment lentement aujourd'hui, je sais pas pourquoi oo', mais sinon normalement il est top.
Tes images seront beaucoup moins lourdes, donc mettront beaucoup moins de temps à charger

[Alrun]

A vrai dire, j'avais essayé de bidouiller le JS du tutoriel mais il faut croire que moi et le JS on n'est pas encore potes XD
Enfin merci ENOOOOORMEMENT ! Cela marche du tonnerre

Et merci aussi pour la petite astuce : j'en ferai bon usage o/

Encore merci ♪
Et bonne journée