javascript - vanilla - $(documento).ready equivalente sin jQuery
jquery document ready javascript (30)
¿Qué tal esta solución?
// other onload attached earlier
window.onload=function() {
alert(''test'');
};
tmpPreviousFunction=window.onload ? window.onload : null;
// our onload function
window.onload=function() {
alert(''another message'');
// execute previous one
if (tmpPreviousFunction) tmpPreviousFunction();
};
Tengo un script que usa $(document).ready
, pero no usa nada más de jQuery. Me gustaría aligerarlo eliminando la dependencia jQuery.
¿Cómo puedo implementar mi propia funcionalidad $(document).ready
sin usar jQuery? Sé que usar window.onload
no será el mismo, ya que window.onload
después de que se hayan cargado todas las imágenes, marcos, etc.
Aquí está el fragmento de código más pequeño para probar DOM listo que funciona en todos los navegadores (incluso IE 8):
r(function(){
alert(''DOM Ready!'');
});
function r(f){/in/.test(document.readyState)?setTimeout(''r(''+f+'')'',9):f()}
Ver esta answer
Coloque su <script>/*JavaScript code*/</script>
justo antes de la etiqueta de cierre </body>
.
Es cierto que esto podría no ser adecuado para los propósitos de todos, ya que requiere cambiar el archivo HTML en lugar de simplemente hacer algo en el archivo JavaScript a la document.ready
, pero aún así ...
Editar:
Aquí hay un reemplazo viable para jQuery ready
function ready(callback){
// in case the document is already rendered
if (document.readyState!=''loading'') callback();
// modern browsers
else if (document.addEventListener) document.addEventListener(''DOMContentLoaded'', callback);
// IE <= 8
else document.attachEvent(''onreadystatechange'', function(){
if (document.readyState==''complete'') callback();
});
}
ready(function(){
// do something
});
Tomado de https://plainjs.com/javascript/events/running-code-when-the-document-is-ready-15/
Otra buena función domReady aquí tomada de https://.com/a/9899701/175071
Como la respuesta aceptada estaba muy lejos de ser completa, jQuery.ready()
función "lista" como jQuery.ready()
basada en la fuente jQuery 1.6.2:
var ready = (function(){
var readyList,
DOMContentLoaded,
class2type = {};
class2type["[object Boolean]"] = "boolean";
class2type["[object Number]"] = "number";
class2type["[object String]"] = "string";
class2type["[object Function]"] = "function";
class2type["[object Array]"] = "array";
class2type["[object Date]"] = "date";
class2type["[object RegExp]"] = "regexp";
class2type["[object Object]"] = "object";
var ReadyObj = {
// Is the DOM ready to be used? Set to true once it occurs.
isReady: false,
// A counter to track how many items to wait for before
// the ready event fires. See #6781
readyWait: 1,
// Hold (or release) the ready event
holdReady: function( hold ) {
if ( hold ) {
ReadyObj.readyWait++;
} else {
ReadyObj.ready( true );
}
},
// Handle when the DOM is ready
ready: function( wait ) {
// Either a released hold or an DOMready/load event and not yet ready
if ( (wait === true && !--ReadyObj.readyWait) || (wait !== true && !ReadyObj.isReady) ) {
// Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).
if ( !document.body ) {
return setTimeout( ReadyObj.ready, 1 );
}
// Remember that the DOM is ready
ReadyObj.isReady = true;
// If a normal DOM Ready event fired, decrement, and wait if need be
if ( wait !== true && --ReadyObj.readyWait > 0 ) {
return;
}
// If there are functions bound, to execute
readyList.resolveWith( document, [ ReadyObj ] );
// Trigger any bound ready events
//if ( ReadyObj.fn.trigger ) {
// ReadyObj( document ).trigger( "ready" ).unbind( "ready" );
//}
}
},
bindReady: function() {
if ( readyList ) {
return;
}
readyList = ReadyObj._Deferred();
// Catch cases where $(document).ready() is called after the
// browser event has already occurred.
if ( document.readyState === "complete" ) {
// Handle it asynchronously to allow scripts the opportunity to delay ready
return setTimeout( ReadyObj.ready, 1 );
}
// Mozilla, Opera and webkit nightlies currently support this event
if ( document.addEventListener ) {
// Use the handy event callback
document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
// A fallback to window.onload, that will always work
window.addEventListener( "load", ReadyObj.ready, false );
// If IE event model is used
} else if ( document.attachEvent ) {
// ensure firing before onload,
// maybe late but safe also for iframes
document.attachEvent( "onreadystatechange", DOMContentLoaded );
// A fallback to window.onload, that will always work
window.attachEvent( "onload", ReadyObj.ready );
// If IE and not a frame
// continually check to see if the document is ready
var toplevel = false;
try {
toplevel = window.frameElement == null;
} catch(e) {}
if ( document.documentElement.doScroll && toplevel ) {
doScrollCheck();
}
}
},
_Deferred: function() {
var // callbacks list
callbacks = [],
// stored [ context , args ]
fired,
// to avoid firing when already doing so
firing,
// flag to know if the deferred has been cancelled
cancelled,
// the deferred itself
deferred = {
// done( f1, f2, ...)
done: function() {
if ( !cancelled ) {
var args = arguments,
i,
length,
elem,
type,
_fired;
if ( fired ) {
_fired = fired;
fired = 0;
}
for ( i = 0, length = args.length; i < length; i++ ) {
elem = args[ i ];
type = ReadyObj.type( elem );
if ( type === "array" ) {
deferred.done.apply( deferred, elem );
} else if ( type === "function" ) {
callbacks.push( elem );
}
}
if ( _fired ) {
deferred.resolveWith( _fired[ 0 ], _fired[ 1 ] );
}
}
return this;
},
// resolve with given context and args
resolveWith: function( context, args ) {
if ( !cancelled && !fired && !firing ) {
// make sure args are available (#8421)
args = args || [];
firing = 1;
try {
while( callbacks[ 0 ] ) {
callbacks.shift().apply( context, args );//shifts a callback, and applies it to document
}
}
finally {
fired = [ context, args ];
firing = 0;
}
}
return this;
},
// resolve with this as context and given arguments
resolve: function() {
deferred.resolveWith( this, arguments );
return this;
},
// Has this deferred been resolved?
isResolved: function() {
return !!( firing || fired );
},
// Cancel
cancel: function() {
cancelled = 1;
callbacks = [];
return this;
}
};
return deferred;
},
type: function( obj ) {
return obj == null ?
String( obj ) :
class2type[ Object.prototype.toString.call(obj) ] || "object";
}
}
// The DOM ready check for Internet Explorer
function doScrollCheck() {
if ( ReadyObj.isReady ) {
return;
}
try {
// If IE is used, use the trick by Diego Perini
// http://javascript.nwbox.com/IEContentLoaded/
document.documentElement.doScroll("left");
} catch(e) {
setTimeout( doScrollCheck, 1 );
return;
}
// and execute any waiting functions
ReadyObj.ready();
}
// Cleanup functions for the document ready method
if ( document.addEventListener ) {
DOMContentLoaded = function() {
document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false );
ReadyObj.ready();
};
} else if ( document.attachEvent ) {
DOMContentLoaded = function() {
// Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).
if ( document.readyState === "complete" ) {
document.detachEvent( "onreadystatechange", DOMContentLoaded );
ReadyObj.ready();
}
};
}
function ready( fn ) {
// Attach the listeners
ReadyObj.bindReady();
var type = ReadyObj.type( fn );
// Add the callback
readyList.done( fn );//readyList is result of _Deferred()
}
return ready;
})();
Cómo utilizar:
<script>
ready(function(){
alert(''It works!'');
});
ready(function(){
alert(''Also works!'');
});
</script>
No estoy seguro de cuán funcional es este código, pero funcionó bien con mis pruebas superficiales. Esto tomó bastante tiempo, así que espero que usted y otros puedan beneficiarse de ello.
PS .: Sugiero compiling .
O puede usar http://dustindiaz.com/smallest-domready-ever :
function r(f){/in/.test(document.readyState)?setTimeout(r,9,f):f()}
r(function(){/*code to run*/});
o la función nativa si solo necesita soportar los nuevos navegadores (A diferencia de jQuery ready, esto no se ejecutará si agrega esto después de que la página se haya cargado)
document.addEventListener(''DOMContentLoaded'',function(){/*fun code to run*/})
Encontramos una implementación del navegador cruzado rápida y sucia que puede hacer el truco para los casos más simples con una implementación mínima:
window.onReady = function onReady(fn){
document.body ? fn() : setTimeout(function(){ onReady(fn);},50);
};
Esta pregunta fue formulada hace mucho tiempo. Para cualquier persona que esté viendo esta pregunta, ahora hay un sitio llamado "es posible que no necesite jquery", que se desglosa, según el nivel de compatibilidad de IE requerido, toda la funcionalidad de jquery y proporciona algunas bibliotecas alternativas más pequeñas.
Documento IE8 listo para que el script de acuerdo con usted no necesite jQuery
function ready(fn) {
if (document.readyState != ''loading'')
fn();
else if (document.addEventListener)
document.addEventListener(''DOMContentLoaded'', fn);
else
document.attachEvent(''onreadystatechange'', function() {
if (document.readyState != ''loading'')
fn();
});
}
Este código de navegador cruzado llamará a una función una vez que el DOM esté listo:
var domReady=function(func){
var scriptText=''(''+func+'')();'';
var scriptElement=document.createElement(''script'');
scriptElement.innerText=scriptText;
document.body.appendChild(scriptElement);
};
Así es como funciona:
- La primera línea de
domReady
llama al métodotoString
de la función para obtener una representación de cadena de la función que se pasa y la envuelve en una expresión que llama inmediatamente a la función. - El resto de
domReady
crea un elemento de script con la expresión y lo agrega albody
del documento. - El navegador ejecuta etiquetas de script adjuntas al
body
vez que el DOM está listo.
Por ejemplo, si hace esto: domReady(function(){alert();});
, se adjuntará lo siguiente al elemento body
:
<script>(function (){alert();})();</script>
Tenga en cuenta que esto funciona solo para funciones definidas por el usuario. Lo siguiente no funcionará: domReady(alert);
Esto es lo que uso, es rápido y cubre todas las bases, creo; Funciona para todo excepto IE <9.
(() => { function fn() {
// "On document ready" commands:
console.log(document.readyState);
};
if (document.readyState != ''loading'') {fn()}
else {document.addEventListener(''DOMContentLoaded'', fn)}
})();
Esto parece captar todos los casos:
- se dispara inmediatamente si el DOM ya está listo (si el DOM no está "cargando", sino "interactivo" o "completo")
- si el DOM aún se está cargando, configura un detector de eventos para cuando el DOM está disponible (interactivo).
El evento DOMContentLoaded está disponible en IE9 y todo lo demás, por lo que personalmente creo que está bien usar esto. Vuelva a escribir la declaración de la función de flecha en una función anónima normal si no está transpilando su código de ES2015 a ES5.
Si desea esperar hasta que se carguen todos los recursos, se muestren todas las imágenes, etc. en su lugar use window.onload.
Existe un reemplazo basado en estándares, DOMContentLoaded
, que es compatible con más del 98% de los navegadores , aunque no con IE8:
document.addEventListener("DOMContentLoaded", function(event) {
//do work
});
La función nativa de jQuery es mucho más complicada que solo window.onload, como se muestra a continuación.
function bindReady(){
if ( readyBound ) return;
readyBound = true;
// Mozilla, Opera and webkit nightlies currently support this event
if ( document.addEventListener ) {
// Use the handy event callback
document.addEventListener( "DOMContentLoaded", function(){
document.removeEventListener( "DOMContentLoaded", arguments.callee, false );
jQuery.ready();
}, false );
// If IE event model is used
} else if ( document.attachEvent ) {
// ensure firing before onload,
// maybe late but safe also for iframes
document.attachEvent("onreadystatechange", function(){
if ( document.readyState === "complete" ) {
document.detachEvent( "onreadystatechange", arguments.callee );
jQuery.ready();
}
});
// If IE and not an iframe
// continually check to see if the document is ready
if ( document.documentElement.doScroll && window == window.top ) (function(){
if ( jQuery.isReady ) return;
try {
// If IE is used, use the trick by Diego Perini
// http://javascript.nwbox.com/IEContentLoaded/
document.documentElement.doScroll("left");
} catch( error ) {
setTimeout( arguments.callee, 0 );
return;
}
// and execute any waiting functions
jQuery.ready();
})();
}
// A fallback to window.onload, that will always work
jQuery.event.add( window, "load", jQuery.ready );
}
La respuesta de jQuery fue bastante útil para mí. Con un poco de refactory se ajustaba bien a mis necesidades. Espero que ayude a alguien más.
function onReady ( callback ){
var addListener = document.addEventListener || document.attachEvent,
removeListener = document.removeEventListener || document.detachEvent
eventName = document.addEventListener ? "DOMContentLoaded" : "onreadystatechange"
addListener.call(document, eventName, function(){
removeListener( eventName, arguments.callee, false )
callback()
}, false )
}
La solución del pobre:
var checkLoad = function() {
document.readyState !== "complete" ? setTimeout(checkLoad, 11) : alert("loaded!");
};
checkLoad();
Añadido este, un poco mejor, supongo, propio alcance, y no recursivo
(function(){
var tId = setInterval(function() {
if (document.readyState == "complete") onComplete()
}, 11);
function onComplete(){
clearInterval(tId);
alert("loaded!");
};
})()
Las soluciones setTimeout / setInterval presentadas aquí solo funcionarán en circunstancias específicas.
El problema aparece especialmente en versiones anteriores de Internet Explorer hasta 8.
Las variables que afectan el éxito de estas soluciones setTimeout / setInterval son:
1) dynamic or static HTML
2) cached or non cached requests
3) size of the complete HTML document
4) chunked or non chunked transfer encoding
El código original (Javascript nativo) para resolver este problema específico está aquí:
https://github.com/dperini/ContentLoaded
http://javascript.nwbox.com/ContentLoaded (test)
Este es el código a partir del cual el equipo de jQuery ha construido su implementación.
Navegador cruzado (navegadores antiguos también) y una solución simple:
var docLoaded = setInterval(function () {
if(document.readyState !== "complete") return;
clearInterval(docLoaded);
/*
Your code goes here i.e. init()
*/
}, 30);
Prueba esto:
function ready(callback){
if(typeof callback === "function"){
document.addEventListener("DOMContentLoaded", callback);
window.addEventListener("load", callback);
}else{
throw new Error("Sorry, I can not run this!");
}
}
ready(function(){
console.log("It worked!");
});
Realmente, si solo te interesa Internet Explorer 9+ , este código sería suficiente para reemplazar jQuery.ready
:
document.addEventListener("DOMContentLoaded", callback);
Si te preocupas por Internet Explorer 6 y algunos navegadores realmente extraños y raros, esto funcionará:
domReady: function (callback) {
// Mozilla, Opera and WebKit
if (document.addEventListener) {
document.addEventListener("DOMContentLoaded", callback, false);
// If Internet Explorer, the event model is used
} else if (document.attachEvent) {
document.attachEvent("onreadystatechange", function() {
if (document.readyState === "complete" ) {
callback();
}
});
// A fallback to window.onload, that will always work
} else {
var oldOnload = window.onload;
window.onload = function () {
oldOnload && oldOnload();
callback();
}
}
},
Recientemente estuve usando esto para un sitio móvil. Esta es la versión simplificada de John Resig de "Pro JavaScript Techniques". Depende de addEvent.
var ready = ( function () {
function ready( f ) {
if( ready.done ) return f();
if( ready.timer ) {
ready.ready.push(f);
} else {
addEvent( window, "load", isDOMReady );
ready.ready = [ f ];
ready.timer = setInterval(isDOMReady, 13);
}
};
function isDOMReady() {
if( ready.done ) return false;
if( document && document.getElementsByTagName && document.getElementById && document.body ) {
clearInterval( ready.timer );
ready.timer = null;
for( var i = 0; i < ready.ready.length; i++ ) {
ready.ready[i]();
}
ready.ready = null;
ready.done = true;
}
}
return ready;
})();
Siempre es bueno usar equivalentes de JavaScript en comparación con jQuery. Una razón es una biblioteca menos para depender y son mucho más rápidos que los equivalentes de jQuery.
Una referencia fantástica para los equivalentes de jQuery es http://youmightnotneedjquery.com/ .
En lo que respecta a su pregunta, tomé el siguiente código del enlace anterior :) La única advertencia es que solo funciona con Internet Explorer 9+ y Internet Explorer 9+ posteriores.
function ready(fn) {
if (document.readyState != ''loading'') {
fn();
}
else {
document.addEventListener(''DOMContentLoaded'', fn);
}
}
Simplemente uso:
setTimeout(function(){
//reference/manipulate DOM here
});
Y, a diferencia de document.addEventListener("DOMContentLoaded" //etc
como en la respuesta más importante, funciona desde IE9: http://caniuse.com/#search=DOMContentLoaded solo indica tan recientemente como IE11.
Por ejemplo, vaya a https://netrenderer.com/index.php , elija Internet Explorer 9 del menú desplegable, ingrese https://dexygen.github.io/blog/oct-2017/jekyll/jekyll-categories/liquid-templates/2017/10/22/how-jekyll-builds-site-categories.html y haga clic en "Render", y verá algo similar a la captura de pantalla al final de esta publicación.
Vea el siguiente código Javascript que estoy usando en el encabezado para manipular el estilo del tema "hacker" de Jekyll a mi gusto, en particular, puede hacer referencia al bloque if (location.pathname !== rootPath)
para ver cómo estoy insertando los enlaces Home
y Blog Home
, que se muestran por IE9 por el sitio de NetRenderer.
Curiosamente, me topé con esta solución setTimeout
en 2009: ¿Se está comprobando si el DOM está preparado? , que probablemente podría haber sido redactado un poco mejor, como quise decir mediante el uso de enfoques más complicados de varios marcos.
setTimeout(function() {//delay execution until after dom is parsed
var containerEls = document.getElementsByClassName(''container'');
var headingEl = containerEls[0].getElementsByTagName(''h1'')[0];
var headerEl = document.getElementsByTagName(''header'')[0];
var downloadsSectionEl = document.getElementById(''downloads'');
var rootPath = "/";
var blogRootPath = "/blog/";
containerEls[0].style.maxWidth = ''800px'';
containerEls[1].style.maxWidth = ''800px'';
headingEl.style.margin = ''0'';
headerEl.style.marginBottom = ''7px'';
downloadsSectionEl.style.margin = ''0'';
if (location.pathname !== rootPath) {
downloadsSectionEl.appendChild(generateNavLink(''Home'', rootPath));
if (location.pathname !== blogRootPath) {
downloadsSectionEl.appendChild(document.createTextNode('' | ''));
downloadsSectionEl.appendChild(generateNavLink(''Blog Home'', blogRootPath));
}
}
function generateNavLink(linkText, hrefPath) {
var navLink = document.createElement(''a'');
var linkTextNode = document.createTextNode(linkText);
navLink.setAttribute(''href'', hrefPath);
navLink.appendChild(linkTextNode);
return navLink;
}
});
Solo agrega esto al final de tu página HTML ...
<script>
Your_Function();
</script>
Porque, los documentos HTML son analizados por arriba-abajo.
Tres opciones:
- Si
script
es la última etiqueta del cuerpo, el DOM estaría listo antes de que se ejecute la etiqueta de script - Cuando el DOM esté listo, "readyState" cambiará a "completo"
- Ponga todo bajo el detector de eventos ''DOMContentLoaded''
onreadystatechange
document.onreadystatechange = function () {
if (document.readyState == "complete") {
// document is ready. Do your stuff here
}
}
Fuente: MDN
DOMContentLoaded
document.addEventListener(''DOMContentLoaded'', function() {
console.log(''document is ready. I can sleep now'');
});
Preocupado por los navegadores de la edad de piedra: vaya al código fuente de jQuery y use la función de ready
. En ese caso, no está analizando + ejecutando toda la biblioteca que está haciendo, solo una pequeña parte de ella.
Vale la pena buscar en Rock Solid addEvent () y http://www.braksator.com/how-to-make-your-own-jquery .
Aquí está el código en caso de que el sitio se caiga.
function addEvent(obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, fn, false);
EventCache.add(obj, type, fn);
}
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent( "on"+type, obj[type+fn] );
EventCache.add(obj, type, fn);
}
else {
obj["on"+type] = obj["e"+type+fn];
}
}
var EventCache = function(){
var listEvents = [];
return {
listEvents : listEvents,
add : function(node, sEventName, fHandler){
listEvents.push(arguments);
},
flush : function(){
var i, item;
for(i = listEvents.length - 1; i >= 0; i = i - 1){
item = listEvents[i];
if(item[0].removeEventListener){
item[0].removeEventListener(item[1], item[2], item[3]);
};
if(item[1].substring(0, 2) != "on"){
item[1] = "on" + item[1];
};
if(item[0].detachEvent){
item[0].detachEvent(item[1], item[2]);
};
item[0][item[1]] = null;
};
}
};
}();
// Usage
addEvent(window, ''unload'', EventCache.flush);
addEvent(window, ''load'', function(){alert("I''m ready");});
Yo uso esto:
document.addEventListener("DOMContentLoaded", function(event) {
//Do work
});
Nota: Esto probablemente solo funciona con navegadores más nuevos, especialmente estos: http://caniuse.com/#feat=domcontentloaded
Este enfoque es el camino más corto que se me ocurre.
La solución basada en el evento DOMContentLoaded solo funciona si la secuencia de comandos se carga antes que el documento, mientras que la comprobación perezosa sugerida aquí garantiza que el código se ejecute siempre, incluso en las secuencias de comandos cargadas dinámicamente más tarde, exactamente como el documento de JQuery listo.
Este código es compatible con todos los navegadores (incluidos algunos heredados, hasta IE6 y Safari para Windows).
(function ready() {
if (!document.body) {setTimeout(ready, 50); return;}
// Document is ready here
})();
Para IE9 +:
function ready(fn) {
if (document.readyState != ''loading''){
fn();
} else {
document.addEventListener(''DOMContentLoaded'', fn);
}
}
Edición de la edición de @duskwuff para admitir Internet Explorer 8 también. La diferencia es una nueva llamada a la prueba de función de la expresión regular y el setTimeout con una función anónima.
Además, puse el tiempo de espera en 99.
function ready(f){/in/.test(document.readyState)?setTimeout(function(){ready(f);},99):f();}
Esta fue una buena solución para el hombre pobre https://.com/a/11810957/185565 . Un comentario consideró un contador para rescatar en caso de emergencia. Esta es mi modificación.
function doTheMagic(counter) {
alert("It worked on " + counter);
}
// wait for document ready then call handler function
var checkLoad = function(counter) {
counter++;
if (document.readyState != "complete" && counter<1000) {
var fn = function() { checkLoad(counter); };
setTimeout(fn,10);
} else doTheMagic(counter);
};
checkLoad(0);
La función ready en jQuery
hace varias cosas. Francamente, no veo ese punto de reemplazarlo a menos que tenga un resultado sorprendentemente pequeño de su sitio web. jQuery
es una biblioteca bastante pequeña, y maneja todo tipo de cosas de navegador cruzado que necesitarás más adelante.
De todos modos, no tiene mucho sentido publicarlo aquí, solo abre jQuery
y observa el bindReady
método.
Comienza llamando a cualquiera document.addEventListener("DOMContentLoaded")
o document.attachEvent(''onreadystatechange'')
dependiendo del modelo de evento, y continúa desde allí.
Si está cargando jQuery cerca de la parte inferior de BODY, pero tiene problemas con el código que escribe jQuery (<func>) o jQuery (document) .ready (<func>), consulte jqShim en Github.
En lugar de recrear su propia función de documento listo, simplemente mantiene las funciones hasta que jQuery esté disponible, luego continúa con jQuery como se espera. El punto de mover jQuery a la parte inferior del cuerpo es acelerar la carga de la página, y aún puede lograrlo al insertar el jqShim.min.js en el encabezado de su plantilla.
Terminé escribiendo este código para mover todos los scripts en WordPress al pie de página, y ahora este código shim ahora se encuentra directamente en el encabezado.
Si no tiene que admitir navegadores muy antiguos, esta es una forma de hacerlo incluso cuando su script externo está cargado con un atributo asíncrono :
HTMLDocument.prototype.ready = new Promise(function(resolve) {
if(document.readyState != "loading")
resolve();
else
document.addEventListener("DOMContentLoaded", function() {
resolve();
});
});
document.ready.then(function() {
console.log("document.ready");
});
function onDocReady(fn){
$d.readyState!=="loading" ? fn():document.addEventListener(''DOMContentLoaded'',fn);
}
function onWinLoad(fn){
$d.readyState==="complete") ? fn(): window.addEventListener(''load'',fn);
}
onDocReady proporciona una devolución de llamada cuando el dom HTML está listo para acceder / parse / manipular completamente.
onWinLoad proporciona una devolución de llamada cuando todo se ha cargado (imágenes, etc.)
- Estas funciones pueden ser llamadas cuando quieras.
- Soporta múltiples "oyentes".
- Funcionará en cualquier navegador.