Discussion :

[Couin]

Chalute !

Je cale sur un petit pouint.

Une feuille de style ne servant que pour le fond d'écran du site, que l'on peut changer via un panneau d'admin.

La feuille de style est un fichier php qui va chercher le nom de fichier image choisi :

Code PHP :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<?
...
$query = "SELECT * FROM config";
...
$bg = "$background_image?".filemtime("./img/backgrounds/$background_image");
?>
html {
background: url(./img/backgrounds/<? echo $bg; ?>) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Dans la page du site coté visiteur, un simple

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

<link rel="stylesheet" id="bgstyle" type="text/css" href="style_v3_bg.php">

Je voudrais que lorsque le visiteur revienne sur la fenêtre du site, la feuille de style soit rechargée pour prendre en compte le changement de fond d'écran sans recharger la page. C’est je l'admets un peu gadget mais la méthode pourrait également me servir pour d'autres projets.

J'ai tenté plusieurs scripts mais sans résultat
J'arrive à faire charger la feuille de style via jquery (j'enlève bien sur la link ci dessus pour ne pas fausser le test) lorsque la fenêtre a le focus, mais pas moyen de la recharger.

Voici le dernier script en date :

Code JS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
$(window).on("blur focus", function(e) {
    var prevType = $(this).data("prevType");
    if (prevType != e.type) {   //  reduce double fire issues
        switch (e.type) {
            case "blur":
                $('div').text("Blured");
                break;
            case "focus":
                $('div').text("Focused");
				// document.getElementById("bgstyle").Window.location.reload(true);
				$('#bgstyle').replaceWith('<link id="css" rel="stylesheet" href="style_v3_bg.php"></link>');
                break;
        }
    }
    $(this).data("prevType", e.type);
})
</script>

Évidement, la 'div' n'est là que pour indique visuellement si focus ou non , à terme ça ne sera plus là.
La div témoin indique bien "Blur" ou "Focused" selon que la fenêtre est active ou non, donc ça c'est bon, mais le fond d'écran n'ets pas actualisé.

Bien entendu, le fichier de feuille de style n'étant pas modifié en lui même, jouer avec sa date ne changera rien

Du coup, je sais pas comment faire.

Une tite idée serait la bienviendue

Merkouin

[Invité]

Bonjour,

une astuce :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<link rel="stylesheet" id="bgstyle" type="text/css" href="style_v3_bg.php?<?= time() ; ?>">

[Couin]

Hello,

Merci pour l'astuce.
Je l'ai adaptée au javascript :

Code JS :

Sélectionner tout - Visualiser dans une fenêtre à part

$('#bgstyle').replaceWith('<link id="bgstyle" rel="stylesheet" href="style_v3_bg.php?'+Date.now()+'"></link>');

Ca change bien l'image de fond (si on l'a changée dans l'admin bien sur), mais il y a un "clignotement" (l’image disparaît et réapparaît) à chaque fois qu’on revient sur la fenêtre.

Du coup j'ai fouillé encore et encore et je suis parvenu à un truc pas trop mal. J'ai supprimé le filemtime du fichier style_v3_bg.php et fais le code suivant dans la page html :

Code JS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
bgval ='' ;
precbgval ='' ;
function get_bg(){
	$.get("style_v3_bg.php", function(response){
		bgval = response;
		if ( bgval != precbgval ) {
		$("head").append("<style>" + response + "</style>");
		precbgval = bgval;
		}
	})
}
 
 $(document).ready(function() {
   var refreshId = setInterval(function() {
	get_bg(); 
   }, 60000);
});

Du coup, seulement un clignotement si on change d'image de fond si elle n'a jamais été chargée.

C’est déjà pas mal, mais y a-t-il possibilité d’éliminer ce clignotement hormis de mettre en cache tous les fonds d'écran disponibles en hidden ?

Merkouiiin