then - Cargue jquery asincrónicamente antes de otros scripts

jquery.when ejemplo

Question

async el async attrib a mi HTML de inclusión de JavaScript.
Así que ahora tengo:

<script async src="jquery.myscript.js"></script>

Y esto funciona con todas las cargas de JS I, todas excepto jquery.

Si agrego una etiqueta async a jQuery <script> todos los demás guiones que dependen de jquery no funcionan.

En ese jsfiddle puedes ver el problema:
http://jsfiddle.net/uFbdV/

En el ejemplo, he usado <script> Mycode </script> lugar de incluir un archivo externo.js, pero esto no cambia la situación.

Me gustaría ejecutar jQuery con async attrib y ejecutar otros pocos scripts externos de forma asíncrona solo después de que se cargue jquery.

¿Es posible?

Answer 1

Me gustaría ejecutar jQuery con async attrib y ejecutar otros pocos scripts externos de forma asíncrona solo después de que se cargue jquery.

Qué significa eso? Suena muy parecido a que quieres cargar jQuery primero, y luego otras cosas cuando está hecho. Entonces quiere cargarlo sincrónicamente . Si aún desea utilizar el modo async , puede definir una función de carga para continuar cargando otras cosas una vez que jQuery esté listo. O podrías usar defer . Ambos se explican aquí: https://davidwalsh.name/html5-async

Answer 2

Usando una función recursiva

He escrito una función para hacer este trabajo muy bien. Debería escribir enlaces de JavaScript en una matriz ordenada de abajo hacia arriba para la carga y una función para los códigos que se ejecutarán después de que finalicen las cargas de la carga.

urls = [
''https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js'',
''https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js'',
''http://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js''
];
loadScripts(urls, urls.length, function(){
/* Jquery and other codes that depends on other libraries here */
});

Impelimantaion

function loadScripts(urls, length, success){
if(length > 0){
script = document.createElement("script");
script.src = urls[length-1];
console.log();
script.onload = function() {
console.log(''%c Script: '' + urls[length-1] + '' loaded!'', ''color: #4CAF50'');
loadScripts(urls, length-1, success);
};
document.getElementsByTagName("head")[0].appendChild(script);
}
else
if(success)
success();
}

Puede poner estos códigos en un archivo como scripts.js y cargarlo con el atributo async .

<script async src="js/scripts.js"></script>

Para css async load, consulte las versiones editadas de esta respuesta.

Answer 3

Este es un gran caso de uso para defer :

<script defer src="jquery.js"></script>
<script defer src="custom.js"></script>

Ninguna de estas etiquetas bloqueará la representación. El navegador puede descargar jquery.js y custom.js en paralelo. Ejecutará jquery.js tan pronto como se haya descargado y el DOM se haya cargado, y custom.js se ejecutará posteriormente.

Lamentablemente, hay algunos problemas:

• No puede usar el atributo defer para scripts en línea.
• Se ha documentado que IE <10 causa scripts con defer para intercalar inesperadamente su ejecución .
• No puedo encontrar ninguna especificación que diga que las secuencias de comandos con la orden de defer deben ejecutarse en orden, solo que deben ejecutarse después de que se cargue DOM.

Answer 4

Esto puede ser lo que estás buscando:
http://www.yterium.net/jQl-an-asynchronous-jQuery-Loader - jQl un cargador jQuery asíncrono.

Carga de forma asíncrona jQuery sin bloquear otros componentes:

jQl.loadjQ(''http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'');

jQl captura automáticamente todas las llamadas jQuery().ready() , por lo que puede escribir:

<script type="text/javascript">
jQl.loadjQ(''http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'');
jQuery(''document'').ready(function(){
alert(''Hello world'');
});
</script>

jQl pondrá en cola estas llamadas a funciones y las ejecutará tan pronto como se cargue jQuery y el DOM esté listo, ya que se ejecutarían de la forma habitual.

Answer 5

<script>var JSdep = [
["//ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.4.min.js", "window.jQuery", "/bundle/jquery"],
["//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js", "self.framework === ''bootstrap''", "/bundle/bootstrap"],
["//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js", "window.jQuery && window.jQuery.ui && window.jQuery.ui.version === ''1.12.1''", "/bundle/jqueryui"],
["//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js", "window.jQuery && window.jQuery.fn.selectpicker", "/bundle/bootstrap-select"],
]
</script>
<script type="text/javascript">
var downloadJSAtOnload = function (e) {
var src = e.srcElement.src.toString();
//console.log("[jquery] loaded", src);
for (var i = 0; i < JSdep.length; i++) {
if (src.indexOf(JSdep[i][0]) !== -1) {
if ((!JSdep[i][1]) || (eval(JSdep[i][1]))) {
console.log("[jquery] loaded ok", src);
break;
} else {
console.log("[jquery] fail", src);
return;
}
}
}
if (i === JSdep.length) {
console.log("[jquery] fallback loaded ok", src);
}
if (jqloaded) {
return;
}
jqloaded = true;
for (var i = 1; i < JSdep.length; i++) {
//console.log("[jquery] loading", JSdep[i][0], JSdep[i][1], JSdep[i][2]);
var raf2 = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf2) { window.setTimeout(dljquery([JSdep[i][0], JSdep[i][1], JSdep[i][2]]), 0); }
else window.addEventListener(''load'', dljquery([JSdep[i][0], JSdep[i][1], JSdep[i][2]]));
}
}
var downloadJSAtOnerror = function (e) {
var src = e.srcElement.src.toString();
console.log("[jquery] error", src);
for (var i = 0; i < JSdep.length; i++) {
if (src.indexOf(JSdep[i][0]) !== -1) {
console.log("[jquery] failed try fallback", src);
dljquery([JSdep[i][2], JSdep[i][1]]);
return;
}
}
console.log("[jquery] failed on fallback", src);
return;
}
// Add a script element as a child of the body
var dljquery = function (src) {
//console.log("[jquery] start", src);
var element = document.createElement("script");
element.src = src[0];
element.async = "async";
try {
document.body.appendChild(element);
} catch (err) {
console.log("[jquery] err", err);
}
if (element.addEventListener) {
element.addEventListener("load", downloadJSAtOnload, false);
element.addEventListener("error", downloadJSAtOnerror, false);
} else if (element.attachEvent) {
element.attachEvent("onload", downloadJSAtOnload);
element.attachEvent("onerror", downloadJSAtOnerror);
} else {
element.onload = downloadJSAtOnload;
element.onerror = downloadJSAtOnerror;
}
}
// var fb = "/bundle/jquery";
var raf = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(function () { window.setTimeout(dljquery([JSdep[0][0], JSdep[0][1], JSdep[0][2]]), 0); });
else window.addEventListener(''load'', dljquery([JSdep[0][0], JSdep[0][1], JSdep[0][2]]));
var jqloaded = false;
function doOnload() {
console.log("[jquery] onload");
}
// Check for browser support of event handling capability
if (window.addEventListener)
window.addEventListener("load", doOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", doOnload);
else window.onload = doOnload;
</script>

encontré que tenía problemas con las cargas de arranque a veces antes de jquery ahora np espero que ayude a otros puse este script en la cabeza pero dí un error no puedo agregar appendChild ahora es anterior / cuerpo y comprobado funciona para todos los navegadores probé script asíncrono pero no tenía un evento que me dice cuando la descarga termina y algunas veces se carga antes de jquery y viceversa porque bootstrap depende de jquery tuve que cargar jquery y luego iniciar la rutina de carga ahora agregaré repliegue

arreglado

ahora comprueba que jq cargó

y solo luego carga otras

ok ahora es copiar y pegar