Voglio eseguire qualche javascript solo quando dom e css è pronto, ma non mi interessa dell'immagine (sono tendenzialmente pigro l'immagine)Come lasciare il javascript eseguito solo quando dom e css è pronto ma non immagine
So come rilevare lo stato pronto, ma come rilevare il css è pronto?
Si dovrebbe utilizzare l'evento document.ready. window.onLoad si attiva quando tutte le immagini e gli altri sono completamente caricati.
Non c'è modo per javascript per dire se i file css vengono caricati a meno che non si caricano i file css in modo esplicito utilizzando JavaScript. Ecco come farei nel secondo caso:
function dynamicallyLoadCss(fileName,callBackFunc){
var fileRef=document.createElement("link");
fileRef.setAttribute("rel", "stylesheet");
fileRef.setAttribute("type", "text/css");
fileRef.setAttribute("href", filename);
if(callBackFunc) {
callBackFunc();
}
}
//Call the function like so...
dynamicallyLoadCss("mystyles.css", function() {
console.log("Our hamsters have finished loading your mystyles.css file.");
});
Avete bisogno di qualcosa come sotto. Questa funzione viene eseguita non appena viene caricato il DOM ma non l'intera pagina. C'è molta differenza tra caricamento della pagina e carico DOM.
Sarebbe una combinazione di utilizzare JS onload E caricare tutti i CSS prima e in cima. Se carichi tutti i tuoi CSS prima di caricare qualsiasi script, hai la certezza di caricare tutti i tuoi CSS; combinati con JS in caricamento e otterrai ciò che stai cercando.
Carica tutti i CSS nell'intestazione della pagina e prima di qualsiasi JavaScript.
È anche consigliabile inserire JavaScript nella parte inferiore della pagina subito prima del tag per assicurarsi che tutti gli elementi siano stati caricati per primi.
$(document).ready(function(){
// now do your actions
});
gente qui postando molti esempi di utilizzo di jQuery's DOM ready feature - ma non sono riusciti a parlare o dimostrare che, al fine di utilizzarlo è necessario includere jQuery.
È possibile utilizzare direttamente il codice JavaScript per ottenere ciò che desideri, ma la tecnica varia a seconda dei browser e jQuery fa sempre un ottimo lavoro per normalizzare queste differenze per te - personalmente sono un jQuery uomo. Probabilmente sarà sempre :)
Entro la fine del del documento HTML <head>, includere la libreria jQuery, e quindi il codice :)
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function(){
console.log("DOM is Ready! Images haven't finished loading yet!");
});
</script>
L'uso della funzione di jQuery .ready() è disponibile in diverse forme. Personalmente, mi piace il metodo di cui sopra. Questi due sotto, sembrano essere i più ufficialmente condonati.
$(document).ready(function(){ console.log("DOM Ready!"); });
$(function(){ console.log("DOM Ready!"); });
jQuery's Documentation on .ready() ha questo da dire:
Mentre JavaScript fornisce l'evento carico per l'esecuzione di codice quando una pagina viene eseguito il rendering, questo evento non viene attivato fino a quando tutte le attività quali le immagini sono state completamente ricevute Nella maggior parte dei casi, lo script può essere eseguito non appena la gerarchia DOM è stata completamente costruita. Il conduttore è passato a.ready() è garantito per essere eseguito dopo che il DOM è pronto, quindi di solito è il posto migliore per collegare tutti gli altri gestori di eventi ed eseguire altri codici jQuery. Quando si utilizzano script che si basano sul valore delle proprietà di stile CSS, è importante fare riferimento a fogli di stile esterni o elementi di stile incorporati prima di fare riferimento agli script.
Ho evidenziato quella citazione dai documenti per te, come hai detto che vuoi caricare il CSS prima. Con gli sguardi delle cose, basta fare in modo che i vostri <link rel="stylesheet" href="style.css" /> tag vengono inseriti nella sezione di <head>sopra il codice jQuery :)
Felice codifica! // Chase
Se non è possibile utilizzare le $ (document) .ready tecnica, è possibile inserire il codice di script a destra prima del tag body si chiude.
<body>
html code....
....
<script>
var executeAfterDOMReady;
....
</script>
</body>
Per quanto riguarda i CSS, si può chiamare il file CSS tramite jQuery:
$("<link/>", { rel: "stylesheet", type: "text/css", href: "your.css"}).appendTo("head");
o anche fare una chiamata AJAX:
$.ajax({
url:"your.css",
dataType:"script",
success:function(data){
$("head").append("<style>" + data + "</style>");
}
});
sta modificando il dom utilizzando javascrpt per mostrare la vostra immagine dopo aver fatto il tuo standard di elaborazione javascript un'opzione? –
@Kafuka: no, penso che la mia immagine sia solo in questa posizione, aspetto il lazyload. Non usare javascipt per modificare – hh54188