[Binano]

Bonjour,

j'aimerais optimiser le chargement des pages de mon forum sur smartphone et pour cela j'aimerais supprimer le chargement de la bannière et du background lorsqu'on consulte la page sur smartphone, est-ce que cela est possible ? Et si oui, comment faut-il procéder ?

J'utilise Prosilver Spéciale Edition avec l'extension "Insert Template Code" pour charger le background et les bannières aléatoire.

Le code actuel pour le background dans l'Event "overall_header_stylesheets_after.html" :

Code: Tout sélectionner

<style>
html, body {
    background: url("{ROOT_PATH}images/background/background.jpg");
	-webkit-background-size: cover; /* pour Chrome et Safari */
	-moz-background-size: cover; /* pour Firefox */
	-o-background-size: cover; /* pour Opera */
	background-size: cover; /* version standardisée */
    background-repeat: no-repeat;
	background-attachment: fixed;
    background-position: center top;
}
</style>

Le code actuel pour les bannières aléatoires dans l'event "overall_footer_copyright_append.html" :

Code: Tout sélectionner

<script>
    var images = new Array();
    images[0] = 'banniere1.jpg';
	images[1] = 'banniere2.jpg';
	images[2] = 'banniere3.jpg';
	images[3] = 'banniere4.jpg';
	images[4] = 'banniere5.jpg';
	images[5] = 'banniere6.jpg';
	images[6] = 'banniere7.jpg';
	images[7] = 'banniere8.jpg';
	images[8] = 'banniere9.jpg';
	images[9] = 'banniere10.jpg';
	images[10] = 'banniere11.jpg';
	images[11] = 'banniere12.jpg';
	images[12] = 'banniere13.jpg';
   
    var r = Math.floor(Math.random() * 13);
    var imageUrl = '{ROOT_PATH}images/bannieres/' + images[r];
    document.getElementsByClassName('headerbar')[0].style.backgroundImage = 'url(' + imageUrl + ')';
</script>

Bon à la limite pour les bannières ce n'est pas grave mais au moins le background...

Merci pour votre aide

[Mazeltof]

'soir ici,

J'utilise Prosilver Spéciale Edition avec l'extension "Insert Template Code" pour charger le background et les bannières aléatoire.

C'est donc du support d'extension

Votre sujet a été déplacé par un membre de l'équipe.
origine : Support des styles ‹ Modifications et recherche de styles ‹ [3.2.x] Modifications et recherche de styles

url du forum et de téléchargement de l'extension, stp

Edit:

pour le background essaie avec ça :

Code: Tout sélectionner

<style>
@media (max-width: 700px) {
    html, body {
        background: none;
    }
}
</style>

[galixte]

Salut,

oui tu peux discriminer l’affichage des bannières avec l’extension « Insert Template Code ».

Pour l’arrière-plan la règle de Mazel est à insérer dans le fichier overall_header_stylesheets_after.html.

Pour la bannière, ouvre le fichier overall_footer_copyright_append.html, trouve :

Code: Tout sélectionner

<script>
    var images = new Array();
    images[0] = 'banniere1.jpg';
	images[1] = 'banniere2.jpg';
	images[2] = 'banniere3.jpg';
	images[3] = 'banniere4.jpg';
	images[4] = 'banniere5.jpg';
	images[5] = 'banniere6.jpg';
	images[6] = 'banniere7.jpg';
	images[7] = 'banniere8.jpg';
	images[8] = 'banniere9.jpg';
	images[9] = 'banniere10.jpg';
	images[10] = 'banniere11.jpg';
	images[11] = 'banniere12.jpg';
	images[12] = 'banniere13.jpg';
   
    var r = Math.floor(Math.random() * 13);
    var imageUrl = '{ROOT_PATH}images/bannieres/' + images[r];
    document.getElementsByClassName('headerbar')[0].style.backgroundImage = 'url(' + imageUrl + ')';
</script>

Et remplace par :

Code: Tout sélectionner

<script>
if (window.matchMedia("(min-width: 700px)").matches) {
  /* La largeur minimum de l'affichage est 700 px inclus */
    var images = new Array();
    images[0] = 'banniere1.jpg';
	images[1] = 'banniere2.jpg';
	images[2] = 'banniere3.jpg';
	images[3] = 'banniere4.jpg';
	images[4] = 'banniere5.jpg';
	images[5] = 'banniere6.jpg';
	images[6] = 'banniere7.jpg';
	images[7] = 'banniere8.jpg';
	images[8] = 'banniere9.jpg';
	images[9] = 'banniere10.jpg';
	images[10] = 'banniere11.jpg';
	images[11] = 'banniere12.jpg';
	images[12] = 'banniere13.jpg';
   
    var r = Math.floor(Math.random() * 13);
    var imageUrl = '{ROOT_PATH}images/bannieres/' + images[r];
    document.getElementsByClassName('headerbar')[0].style.backgroundImage = 'url(' + imageUrl + ')';
} else {
  /* L'affichage est inférieur à 700px de large */
}
</script>

Puis purge le cache du forum.

[Binano]

Merci à vous deux, ça a l'air de fonctionner

Mais j'ai tout de même un doute pour le background, j'ai l'impression qu'en version smartphone le background est chargé en mémoire mais il n'est juste pas affiché. Donc le temps de chargement n'est pas réduit, je me trompe ?