Pregunta
¿Cómo puedo comprobar con Javascript si ha cargado el HTML?
Responder esta pregunta por dudin el 2009-09-30
Tengo una página web en la que cargo varios ficheros Javascript, tanto locales como remotos alojados por otros servidores (aquí donde radica el problema) pues veo que uno de ellos carga una imagen de 1x1 pixel (sistema de estadísticas) la cual se demora mucho en cargar (a veces se queda como colgada), producto a esto las funciones que mando a ejecutar en el onload del documento no están disponible tan rápido a pesar de estar listo todo el código HTML. ¿Qué otra variante puedo usar?
Respuestas
Una posible solución es determinar si el DOM está listo, para ello puedes apoyarte en la función DOMContentLoaded que funciona en múltiples navegadores y que fue desarrollada por Dean Edwards, Mark Wubben, y Paul Sowden:
Ejemplo:
Ver ejemplo completo: http://www.3 http://site.eu/jstests/onContent/final.html
function onContent(f) {
var a = onContent,
b = navigator.userAgent,
d = document,
w = window,
c = "onContent",
e = "addEventListener",
o = "opera",
r = "readyState",
s = "<scr".concat("ipt defer src='//:' on", r, "change='if(this.", r, "==\"complete\"){this.parentNode.removeChild(this);", c, ".", c, "()}'></scr", "ipt>");
a[c] = (function(o) {
return function() {
a[c] = function() {};
for (a = arguments.callee; ! a.done; a.done = 1) f(o ? o() : o)
}
})(a[c]);
if (d[e]) d[e]("DOMContentLoaded", a[c], false);
if (/WebKit|Khtml/i.test(b) || (w[o] && parseInt(w[o].version()) < 9))(function() { / loaded | complete / .test(d[r]) ? a[c]() : setTimeout(arguments.callee, 1)
})();
else if (/MSIE/i.test(b)) d.write(s);
};
Ejemplo:
onContent(function(){alert(" ya cargué:)")});
Ver ejemplo completo: http://www.3 http://site.eu/jstests/onContent/final.html
por maikel el 2009-09-30
Ahora si usas librerías JavaScript la solución es mucho más simple:
Prototype:
Ver: http://www.prototypejs.org/api/document/observe
Jquery:
Ver: http://docs.jquery.com/Events/ready
YUI:
Ver: http://developer.yahoo.com/yui/docs/YAHOO.util.Event.html
Prototype:
document.observe("dom:loaded",function(){ alert("DOM listo");});
Ver: http://www.prototypejs.org/api/document/observe
Jquery:
$(document).ready(function () {
alert("DOM listo");
});
Ver: http://docs.jquery.com/Events/ready
YUI:
YAHOO.util.Event.onDOMReady(function (ev) {
alert("DOM listo");
});
Ver: http://developer.yahoo.com/yui/docs/YAHOO.util.Event.html
por maikel el 2009-09-30



