Google Groups no longer supports new Usenet posts or subscriptions. Historical content remains viewable.
Dismiss
jquery 3 e document.ready
21 views
Skip to first unread message
gandalf.co...@gmail.com
Oct 16, 2018, 7:07:17 AM10/16/18
to
Ciao a tutti
Sto letteralmente diventando cretino nel risolvere un problema apparentemente semplice ma che credo sia causato da jquery3
In pratica, la document ready viene triggerata prima ancora di aver scaricato tutti i plugin della jquery stessa.
La pagina è così composta:
<html>
<head>
<script src='enorme_file_minificato.js'>
<script src='altro_enorme_file_minificato.js'>
<script src='ulteriore_enorme_file_minificato.js'>
<script>
var variable;
var variabile2;
var altrevariabili;
var tantissime_altre_variabili;
var stringa = 'ciao mondo';
</script>
</head>
<body>
la pagina
</body>
<script>
$(document).ready(function() {
});
</script>
</html>
La jquery è dentro "enorme_file_minificato.js"
Tonnellate di plugin jquery e non, sono dentro "altro_enorme_file_minificato.js"
Altra roba è dentro "ulteriore_enorme_file_minificato.js"
Da quel che so (e che ho provato centinaia di volte su decine e decine di browser/combinazioni diverse),
il browser fa il parse in fila, prima di arrivare al codice nel footer,
ha scaricato tutto il codice esterno (dato che è referenziato prima)
Non è il mio caso.
Ricevo errori del tipo:
"$ is not defined"
"variabile is not defined"
"Cannot read property 'trim' of undefined" (riferita a stringa.trim())
"Cannot read property 'replace' of undefined" (riferita a stringa.replace('mondo','italia');
Non ne vengo a capo. Sono almeno 2 mesi che faccio prove su prove.
Ho letto sul forum jquery che dalla v3 la document ready è asincrona e
potrebbe venire triggerata prima che il resto dei plugin sia scaricato.
Il come sia possibile non lo so, dato che dovrebbe essere il browser a
bloccare l'esecuzione dello script nel footer prima di aver scaricato
tutti quelli degli header.
Fatto sta che spesso ricevo gli errori di cui sopra, o plugin non riconosciuti
etc etc.
Ho "parzialmente" (ricevo ancora troppi errori del genere) risolto cambiando
tutti i riferimenti da "$(document).ready" a
$(window).on('load', function(){
$.ready.then(function(){ })
});
In pratica, la $.ready viene triggerata dopo la window.load (che si triggera
dopo che il browser ha scaricato tutto, immagini compreso).
Idee? Sto veramente diventando matto.
Sto letteralmente diventando cretino nel risolvere un problema apparentemente semplice ma che credo sia causato da jquery3
In pratica, la document ready viene triggerata prima ancora di aver scaricato tutti i plugin della jquery stessa.
La pagina è così composta:
<html>
<head>
<script src='enorme_file_minificato.js'>
<script src='altro_enorme_file_minificato.js'>
<script src='ulteriore_enorme_file_minificato.js'>
<script>
var variable;
var variabile2;
var altrevariabili;
var tantissime_altre_variabili;
var stringa = 'ciao mondo';
</script>
</head>
<body>
la pagina
</body>
<script>
$(document).ready(function() {
});
</script>
</html>
La jquery è dentro "enorme_file_minificato.js"
Tonnellate di plugin jquery e non, sono dentro "altro_enorme_file_minificato.js"
Altra roba è dentro "ulteriore_enorme_file_minificato.js"
Da quel che so (e che ho provato centinaia di volte su decine e decine di browser/combinazioni diverse),
il browser fa il parse in fila, prima di arrivare al codice nel footer,
ha scaricato tutto il codice esterno (dato che è referenziato prima)
Non è il mio caso.
Ricevo errori del tipo:
"$ is not defined"
"variabile is not defined"
"Cannot read property 'trim' of undefined" (riferita a stringa.trim())
"Cannot read property 'replace' of undefined" (riferita a stringa.replace('mondo','italia');
Non ne vengo a capo. Sono almeno 2 mesi che faccio prove su prove.
Ho letto sul forum jquery che dalla v3 la document ready è asincrona e
potrebbe venire triggerata prima che il resto dei plugin sia scaricato.
Il come sia possibile non lo so, dato che dovrebbe essere il browser a
bloccare l'esecuzione dello script nel footer prima di aver scaricato
tutti quelli degli header.
Fatto sta che spesso ricevo gli errori di cui sopra, o plugin non riconosciuti
etc etc.
Ho "parzialmente" (ricevo ancora troppi errori del genere) risolto cambiando
tutti i riferimenti da "$(document).ready" a
$(window).on('load', function(){
$.ready.then(function(){ })
});
In pratica, la $.ready viene triggerata dopo la window.load (che si triggera
dopo che il browser ha scaricato tutto, immagini compreso).
Idee? Sto veramente diventando matto.
gandalf.co...@gmail.com
Oct 17, 2018, 12:02:20 PM10/17/18
to
Come se non bastasse, ho questo assurdo comportamento:
-------------------------------------------------------
var funzione = function() {
// varie cose che richiedono il DOM inizializzato
}
$.ready.then(function(){
// bla bla bla
funzione(); // questa muore
});
-------------------------------------------------------
Muore, perchè quando chiamo "funzione()" il DOM non è inizializzato
di conseguenza da li dentro non posso manipolare gli elementi.
Assurdo, non ha senso, il richiamo della funzione avviene *dentro* la
document ready, quindi per forza di cose anche dentro la funzione il
dom è presente.
E' come se la $.ready.then(function(){}) in realtà non triggerasse
al ready del dom, ma questo è il metodo ufficiale da usare con jquery >= 3
Ho provato anche con $(document).ready(function() {}); o $(function() {})
ma non cambia assolutamente nulla.
Analogia: se richiamo un evento di google maps (e google maps io lo
inizializzo dentro una document ready, pertanto l'evento non si può
verificare senza aver prima inizializzato il dom), si spacca il mondo
perchè anche in questo caso, all'esecuzione dell'evento il dom non è pronto.
Il workaround è stato mettere tutto il codice chiamato nei vari eventi, evento
per evento, singolarmnente dentro la $.ready.then(function(){});
-------------------------------------------------------
var funzione = function() {
// varie cose che richiedono il DOM inizializzato
}
$.ready.then(function(){
// bla bla bla
funzione(); // questa muore
});
-------------------------------------------------------
Muore, perchè quando chiamo "funzione()" il DOM non è inizializzato
di conseguenza da li dentro non posso manipolare gli elementi.
Assurdo, non ha senso, il richiamo della funzione avviene *dentro* la
document ready, quindi per forza di cose anche dentro la funzione il
dom è presente.
E' come se la $.ready.then(function(){}) in realtà non triggerasse
al ready del dom, ma questo è il metodo ufficiale da usare con jquery >= 3
Ho provato anche con $(document).ready(function() {}); o $(function() {})
ma non cambia assolutamente nulla.
Analogia: se richiamo un evento di google maps (e google maps io lo
inizializzo dentro una document ready, pertanto l'evento non si può
verificare senza aver prima inizializzato il dom), si spacca il mondo
perchè anche in questo caso, all'esecuzione dell'evento il dom non è pronto.
Il workaround è stato mettere tutto il codice chiamato nei vari eventi, evento
per evento, singolarmnente dentro la $.ready.then(function(){});
Alessandro Pellizzari
Oct 19, 2018, 5:12:25 AM10/19/18
to
On 16/10/2018 12:07, gandalf.co...@gmail.com wrote:
> <script src='enorme_file_minificato.js'>
> <script src='altro_enorme_file_minificato.js'>
> <script src='ulteriore_enorme_file_minificato.js'>
> ...
> <script src='enorme_file_minificato.js'>
> <script src='altro_enorme_file_minificato.js'>
> <script src='ulteriore_enorme_file_minificato.js'>
> La jquery è dentro "enorme_file_minificato.js"
> Tonnellate di plugin jquery e non, sono dentro "altro_enorme_file_minificato.js"
> Altra roba è dentro "ulteriore_enorme_file_minificato.js"
Hai provato a caricare jQuery direttamente per primo (magari dalla sua
> Tonnellate di plugin jquery e non, sono dentro "altro_enorme_file_minificato.js"
> Altra roba è dentro "ulteriore_enorme_file_minificato.js"
CDN), invece di metterlo dentro il file minificato?
Ho la sensazione che qualsiasi cosa abbia minificato quei file abbia
anche messo qualche async dentro.
Bye.
gandalf.co...@gmail.com
Oct 19, 2018, 6:22:45 AM10/19/18
to
Il giorno venerdì 19 ottobre 2018 11:12:25 UTC+2, Alessandro Pellizzari ha scritto:
> Hai provato a caricare jQuery direttamente per primo (magari dalla sua
> CDN), invece di metterlo dentro il file minificato?
Si, non cambia nulla. E' stato il primo test che ho fatto-
> Hai provato a caricare jQuery direttamente per primo (magari dalla sua
> CDN), invece di metterlo dentro il file minificato?
> Ho la sensazione che qualsiasi cosa abbia minificato quei file abbia
> anche messo qualche async dentro.
Altra assurdità di poco fa:
-------------------------------
$(function() {
var miaFunzione = function() {
// Qui il dom è ready, ma in realtà non trova gli elementi.
}
// varie cose
// inizializzo mappa google
x = new google...
// setto un evento (da notare che sono dentro la *document.ready*)
google.events.addListener(miaFunzione());
});
-------------------------------------------
Quando si triggera l'evento (che per forza di cose viene triggerato
*dopo* la DOM ready visto che lo instanzio li dentro, quindi, salvo
macchine del tempo, non è tecnicamente possibile avere l'evento che
richiama "miaFunzione" prima che il DOM sia ready.
In altre parole, se dentro "miaFunzione" provo ad accedere, mediante jquery,
a '#ciccio', non ritorna nulla.
Se wrappo tutta miaFunzione in $(), allora va:
var miaFunzione = function() {
$(function() {
// così riesco a leggere '#ciccio'
});
});
Ovviamente non posso incapsulare tutte le funzioni di tutti gli eventi
dentro la document ready (anche solo per problemi di scope)
0 new messages