Estou com um problema para fazer uma function esperar o carregamento do pacote.js com a tag async
<script id="packjs" async type="text/javascript" src="pacote.js"></script>
Esse arquivo contém o jQuery e alguns plugins.O problema é que quando carrego com async
eu tenho que arrumar uma forma de fazer as funções na página e aguardar pelo carregamento do pacote.js, achei algumas soluções que funcionaram no FF e IE, mais no Chrome as vezes não funciona dependendo da ordem de carregamento.
o que eu já tentei:
document.getElementById('packjs').addEventListener("load", chamoUmaFuncaoAqui,false);
Seria a solução perfeita, e funciona no FF e IE, mas no Chrome, não sei o porquê. As vezes esse evento não funciona e ativa a função logo no inicio, portanto antes do pacote.js. Tentei combinar com uma declaração de var no final do pacote.js e depois verificar se ela existe,
if (typeof pronto !== 'undefined') {
chamoUmaFuncaoAqui();
}
mais também não funcionou.
function init() {
if (window.jQuery) {
// Código dependente do jQuery fica aqui
tempo=Date.now()-timestamp;
console.log('Alternativa Função init com setTimeout (se ocorrer depois de window.addEventListener load não funcionará): '+tempo);
//car_news();
//Car_Com();
} else {
window.setTimeout(init, 100);
}
}
init();
O problema é que quando o carregamento é muito rápido, a diferença de tempo entre a função e o evento window.addEventListener
load é de milésimos de segundos, e se for executado depois, não funciona.
minha página com esse teste e algumas das opções que ja testei. Deixei tudo com console.log
pra acompanhar o problema.
Eu não tenho um conhecimento tão grande en javascript, mas creio que o problema tem ocorrido apenas no Chrome quando ele por algum motivo (creio que de forma errada) dá o window.addEventListener
DOMContentLoaded antes de carregar o arquivo.js (isso não ocorre nos outros navegadores)
Algum sabe como contornar isso? Se puder ser com exemplo agradeço.
Resolvido, (eu acho, rs). antes de chamar o arquivo.js adicionei:
var pronto = false; var feito=false;
de dentro do arquivo.js adicionei: ronto=true;
if (feito==false && typeof executa !== 'undefined')
{feito=true;executa('Chamado de dentro do Arquivo PACK.JS ');};
Na Pagina eu criei uma segunda chamada caso não tenha sido chamada ainda de dentro do arquivo.js
if (pronto==true && feito==false)
{feito=true;executa('Chamado pela PAGINA ');}
Mas o que resolveu foi criar uma condição dentro da function executa para verificar se o document.addEventListener "DOMContentLoaded" já avia acontecido ou não. Isso porque no Chrome com async pode acontecer do arquivo ser carregado antes desse evento, isso me pareceu não ocorreu no FF e IE. Sendo assim, na página ficou assim:
function executa(a){
if (DOMpronto==true) {
/*o que precisar ANTES do DOM ter sido carregado*/
}else{
/*o que precisar DEPOIS do DOM ter sido carregado*/
}
}
function evento(f) {
if (window.addEventListener)
{window.addEventListener("load", f,false);}
else if (window.attachEvent)
{window.attachEvent("onload", f,false);}
else
{window.onload = f;}
}
var DOMpronto=false
evento(function(){console.log('carregoru DOM ');DOMpronto=true})
if (pronto==true && feito==false) {feito=true;executa('pela PAGINA ');}
Dei uma resumida pro que é pertinente, mas basicamente é isso e funcionou. Obrigado pela atenção
document.getElementById('packjs').onreadystatechange = function() { if (script.readyState == 'loaded') { console.log("CARREGOU") } };
. Eu não ficaria monitorando com timers não, seria uma baita gambiarra.