evento jQuery che si triggers dopo il caricamento del CSS?

Ho un paio di link sulla mia pagina (all’interno di un

) che ti permette di cambiare i fogli di stile CSS:

 $('#theme-selector a').click(function(){ var path = $(this).attr('href'); $('head link').remove(); $('head').append(''); return false; }); 

Ora, dopo aver cambiato lo stile sulla pagina, voglio ottenere il nuovo colore di sfondo, usando il seguente codice (che inserisco dopo $('head').append call):

 var bgcolor = $('body').css('background-color'); alert(bgcolor); 

Il problema è, penso, che ci vuole del tempo prima che il browser scarichi il nuovo foglio di stile e a volte ottengo il vecchio colore di sfondo nel mio messaggio di avviso. C’è qualche evento che posso bind che mi avviserà solo dopo che tutti i fogli di stile sono stati caricati sulla pagina?

Al momento, tutto quello che posso pensare è usare un setTimeout(function(){}, 5000); che non è eccezionale, perché se ci vuole più tempo per caricare tutti i CSS nella pagina.

Fammi sapere se ho bisogno di chiarire qualsiasi cosa e posso fornire più codice.

Piuttosto che creare un nuovo elemento di collegamento e aggiungerlo alla testa, è ansible recuperare il contenuto del foglio di stile con una chiamata AJAX e inserirlo in un blocco di stile in linea. In questo modo, puoi utilizzare la callback “completa” di jQuery per triggersre l’assegno.

 $('#theme-selector a').click(function(){ var path = $(this).attr('href'); $.get(path, function(response){ //Check if the user theme element is in place - if not, create it. if (!$('#userTheme').length) $('head').append(''); //populate the theme element with the new style (replace the old one if necessary) $('#userTheme').text(response); //Check whatever you want about the new style: alert($('body').css('background-color')); }); }); 

Non ho ancora testato questo codice, quindi potrebbero esserci degli errori di syntax-y, ma la logica dovrebbe essere abbastanza valida.

L’evento load può essere visto per qualsiasi elemento associato a un URL, non funziona per te quando carichi il foglio di stile CSS? http://api.jquery.com/load-event/

Prova qualcosa del genere:

 var path = $(this).attr('href'); $('head link').remove(); var styleSheet = $(''); styleSheet.load(function(){alert("Loaded");}); $('head').append(styleSheet); 

Modifica: come indicato di seguito, funziona solo in IE, chi avrebbe mai pensato?

 var cssLoaded = function() { alert($('body').css('background-color')); }; $('#theme-selector a').click(function(){ var path = $(this).attr('href'); $('head link').remove(); $('head').append(''); return false; }); 

testato con successo in Chrome 28, IE 10, FF22

È ansible utilizzare lazyload (plugin jQuery) per caricare un file css. Ha la possibilità di chiamare una funzione quando il file è incluso.

Esempio:

 // Load a CSS file and pass an argument to the callback function. LazyLoad.css('foo.css', function (arg) { // put your code here }); 

Sono arrivato qui alla ricerca di un modo per rimuovere i CSS critici (elemento) dopo essere sicuri al 100%, che i fogli esterni siano stati caricati e resi pigri . Ciò mi permetterebbe di utilizzare universalmente il CSS interno critico universale, visivamente piacevole, su diversi progetti. Dal momento che alcuni degli stili critici sono visivamente contro quelli pigri, quindi devono essere sovrascritti (troppo lavoro) o rimossi. Questo è quello che voglio, in breve:

  1. Carica il documento con CSS interno critico
  2. Lazyload del CSS aggiuntivo dopo che il documento è reso e interattivo (buono per SEO e UX)
  3. Rimuovi i CSS critici dall’HTML dopo che i fantastici fogli di stile aggiuntivi sono stati caricati e resi veramente, per evitare lo sfarfallio che si è verificato con tutte le altre soluzioni (ne ho provate parecchio).

Una soluzione di lavoro al 100% (potrebbe essere impopolare) è usare setInterval (); dopo aver scaricato il css secondario, per verificare periodicamente se uno stile, univoco per CSS secondario è stato veramente applicato. Quindi posso rimuovere il CSS critico (o qualsiasi altra cosa io voglia ..).

Ho creato una demo dal vivo con commenti su Codepen: https://codepen.io/Marko36/pen/YjzQzd e alcune informazioni in un blogpost: triggerszione di un evento Javascript / jQuery dopo il caricamento del CSS .

 var CSSloadcheck = setInterval(function () { if ($('body').css('opacity') != 1) { //when opacity is set to 0.99 by external sheet $('style#critical').remove(); clearInterval(CSSloadcheck); } }, 100); 

Potresti semplicemente continuare a controllare se il colore di sfondo è sempre lo stesso, e poi fare le tue cose se mai cambia.

 oldbackground=getbackground() function checkbackground(){ if(oldbackground!=getbackground()){ oldbackground=getbackground() //Do your thing } } setInterval(checkbackground,100)