Je me demandais quelle est la meilleure façon d'appeler un fichier css aléatoire sur l'actualisation de la page avec Javascript?Charger le CSS aléatoire sur l'actualisation de la page
Un grand merci
Je me demandais quelle est la meilleure façon d'appeler un fichier css aléatoire sur l'actualisation de la page avec Javascript?Charger le CSS aléatoire sur l'actualisation de la page
Un grand merci
Merci pour vos conseils, ne savais pas qu'il était possible avec une simple ligne de php et effectivement trouvé que cette méthode était assez court et doux
<link href="/styles/<?php echo mt_rand(1, 5); ?>.css" rel="stylesheet" type="text/css"/>
Je l'ai trouvé ici, http://forum.mamboserver.com/showthread.php?t=61029
Un grand merci
ps. A List Apart ont aussi une façon assez simple et brillante pour changer les images, http://www.alistapart.com/articles/randomizer/
Annexer un élément <link>
sur document.ready
.
var randomFileName=Math.random(); // or whatever
$(document).ready(function() {
$('head').append('<link rel="stylesheet" type="text/css" href="' + randomFileName + '.css">');
});
Non testé. Comme mentionné ci-dessus, c'est probablement une meilleure idée (lire: plus compatible) pour un script côté serveur de cracher un nom de fichier aléatoire directement dans le HTML de la page au lieu d'utiliser JS trickery.
Si vous utilisez PHP, vous pouvez lire votre répertoire CSS et choisissez un fichier aléatoire comme celui-ci:
<?php
$css_dir = '/css';
$files = array();
foreach(glob($cssdir.'/*.css') as $file)
{
$array[] = $file;
}
echo '<link rel="stylesheet" type="text/css" href="' . array_rand($files, 1) . '">';
?>
Juste essayé cette technique, mais rien ne se répercute donc pas de fichier CSS est chargé – egr103
var link = [];
link[0] = "http://site.com/css/style1.css";
link[1] = "http://site.com/css/style2.css";
link[2] = "http://site.com/css/style3.css";
$(function() {
var style = link[Math.floor(Math.random() * link.length)];
$('<link />',{
rel :'stylesheet',
type:'text/css',
href: style
}).appendTo('head');
});
Modifier: Merci Basil Siddiqui!
var link = [];
link[0] = "http://site.com/css/style1.css";
link[1] = "http://site.com/css/style2.css";
link[2] = "http://site.com/css/style3.css";
$(function() {
var style = link[Math.floor(Math.random() * link.length)];
if (document.createStyleSheet){
document.createStyleSheet(style);
}else{
$('<link />',{
rel :'stylesheet',
type:'text/css',
href: style
}).appendTo('head');
}
});
J'ai essayé mais il est appliqué après que la page a chargé de sorte que le style ne soit pas appliqué – bsiddiqui
@BasilSiddiqui Merci de remarquer .. s'il vous plaît se référer à ce [tutoriel] (http://www.vidalquevedo.com/how-to-load-css-stylesheets-dynamically-with-jquery) pour d'autres conseils! Bonne journée! :) –
vous pouvez le faire en générant lien au hasard en utilisant seulement javascript
<p id="demo"></p>
<script>
var r=Math.random();
var x=document.getElementById("demo")
if (r>0.5)
{
x.innerHTML="<a href='http://w3schools.com'>Visit W3Schools</a>";
}
else
{
x.innerHTML="<a href='http://wwf.org'>Visit WWF</a>";
}
</script>
Si vous souhaitez utiliser javascript la meilleure façon est de charger tous les styles aléatoires dans un seul fichier de la manière normale.
Puis PREPEND tout le css aléatoire avec un nombre tel que:
.random-1 h1 {
color: blue;
}
.random-2 h1 {
color: red;
}
/* ... etc... */
Ensuite, ajoutez simplement une classe au hasard sur le corps avec javascript. Cela devrait limiter les problèmes de chargement et de rendu, et vous n'avez pas besoin de vous soucier du moment où vous appelez le javascript. (Les problèmes de rendu dépendront du type de modification que vous effectuez - bien que ce ne soit pas différent du masquage et de l'affichage des objets DOM que vous voyez sur de nombreux sites Web.)
Cela rendrait également votre script serveur plus simple. Ajoutez simplement une classe au corps lorsque vous créez la page. –
Est-ce que ce doit être Javascript? Ce serait beaucoup plus facile et moins kludgy côté serveur. –
Je suis d'accord avec Pekka. –
Le problème avec ceci est que lorsque votre Javascript est exécuté votre DOM doit être complet, ainsi il est possible que le navigateur ait déjà commencé à rendre la page. La modification du CSS à ce stade interrompt ce flux et pourrait ralentir le rendu de la page ainsi que l'utilisateur de voir des «flashes» lorsque le navigateur change de style. –