Alléger la page en utilisant un JS

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Alléger la page en utilisant un JS

Message par Alrun le Dim 31 Aoû 2014 - 5:42

Bonsoir Smile

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 Smile

---

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)])
          })
        });


Dernière édition par Alrun le Dim 31 Aoû 2014 - 15:51, édité 1 fois

Alrun
Nouveau membre

Messages : 24
Inscrit(e) le : 18/05/2014

http://sans-titre.forumactif.fr/
Alrun a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Alléger la page en utilisant un JS

Message par [Nihil] le Dim 31 Aoû 2014 - 12:02

@Alrun a écrit: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 Tuto 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 Wink

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 Smile

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 Wink
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 Wink

[Nihil]
# Tropactif #

Messages : 1155
Inscrit(e) le : 10/12/2009

http://forum.forumactif.com
[Nihil] a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Alléger la page en utilisant un JS

Message par Alrun le Dim 31 Aoû 2014 - 15:50

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 Very Happy

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

Encore merci ♪
Et bonne journée Smile

Alrun
Nouveau membre

Messages : 24
Inscrit(e) le : 18/05/2014

http://sans-titre.forumactif.fr/
Alrun a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum