1

Eu tenho um problema com conteúdo carregado em AJAX.

É o seguinte: quando eu carrego scripts via ajax, eu não tenho os eventos "onload" ou outros semelhantes para poder disparar o script carregado. O atributo async na tag script resolve isso? Se não, como eu posso resolver esse problema? (Como posso disparar os scripts carregados dinamicamente?)

UPDATE

Me expressei mal na pergunta e acabou não refletindo a minha real dúvida. Peço desculpas aos que investiram seu tempo em responder. Tentei apagar a questão, mas não consegui.

PS: já resolvi o problema. Obrigado a todos.

1
  • Pode explicar melhor o que quer dizer com "carrego scripts via ajax"? Você carrega diretamente um arquivo/código JS, ou é um HTML com tag <script src="..."> dentro?
    – bfavaretto
    10/06/2017 às 18:38

3 Respostas 3

6

Não, o uso do atributo async em elementos <script src="..."> é para evitar o bloqueio de renderização (blocking-render).

Sobre o uso de Ajax eu realmente não acho que seja necessário tanto trabalho, pode sim carregar o script dinamicamente com document.createElement, nem mesmo é necessário o async, todavia é bom usá-lo, no final da resposta tem um exemplo de como carregar dinamicamente.

Nota o atributo async não tem efeito em scripts inline, assim por exemplo:

<script async>foobar();</script>

Quando uma tag script é solicitada a renderização da página é "travada" naquele momento até que o script seja totalmente baixado e processado, então só a partir deste ponto o que vier depois será carregado, todavia muitas coisas são desnecessárias esperar que o script carregue, então você pode usar:

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

O que fará o script carregar paralelamente/simultaneamente sem travar a renderização, ou seja não precisará carregar o script todo para que a página possa vir a renderizar, o próprio PageSpeed Insights sugere que faça isto para uma melhor "experiencia do usuário" (UX), eu respondi outras perguntas sobre o assunto, veja:

Suporte

Em alguns navegadores mais antigos que suportam o async usar async=false em elementos adicionados dinamicamente não funcionava como esperado

Conforme caniuse

  • Firefox 3.6+
  • Internet Explorer 10+
  • Chorme 8+
  • Safari no iOS 5.0+
  • Navegador nativo Android 3+
  • Safari 5 no Mac

Múltiplos JavaScripts com dependências

Exemplo de script para carregar múltiplos .js que tenham dependências uns nos outros, ou seja um .js depende que o outro esteja carregado, mas mesmo assim evite o bloqueio de renderização:

<script>
//Esta função carrega os arquivos javascript
function loadJs(url, callback) {
    var js = document.createElement("script");

    //Verifica se o callback é uma função
    if (typeof callback === "function") {
        var isReady = false;

        //Executa se for carregado no onload ou readystatechange
        function ready() {
             if (isReady) return;

             //Bloqueia execução repetida do callback
             isReady = true;

             //Chama o callback
             callback();
        }

        js.onload = ready;

        /*Internet explorer (http://stackoverflow.com/q/17978255/1518921)*/
        js.onreadystatechange = function() {
            if (/^(complete|loaded)$/.test(js.readyState)) ready();
        }
    }

    js.async = true;
    js.src  = url;
    document.body.appendChild(js);
}

loadJs("js/jquery.min.js", function() {
    loadJs("js/bootstrap.js"); //Depende do jQuery
    loadJs("js/plugin.js"); //Depende do jQuery
});

//Não depende do jQuery
loadJs("js/outros-scripts.js");
</script>
1

O atributo "async" serve para que o carregamento de scripts aconteça sem bloquear o carregamento normal de outros elementos da página. Assim ele não para o que está "fazendo" para poder carregar o seu script.

A melhor maneira de carregar scripts sem o atributo "async" é no final da página, assim ele carregará depois de todos os elementos serem carregados.

Para disparar os scripts você terá que "linkar" as funções aos elementos que você necessita, (Como não conheço a sua página e os elementos, não tenho como dizer a maneira correta de realizar.)

1

faça que o seu script verifique se a pagina já está carregada antes de registrar o script para execução.

No entanto, aconselho que utilize o "onreadystatechange" no lugar do "onload".

var loadScript = function (script) {
  if (document.readyState == "loading")
  {
    document.addEventListener("readystatechange", function (event) {
      if (document.readyState == "interactive") {
        script();
      }
    });
  }
  else
  {
    script();
  }
}

loadScript(function () {
  console.log("Hello World!");
});

os valores possíveis para o **document.readyState** são.:

  • loading: O Browser não terminou de carregar todos os elementos DOM.
  • interactive: O Browser terminou de carregar os elementos DOM, porém ainda está carregando os demais elementos (imagens, vídeos, etc).
  • complete: O Browser terminou de carregar todos os elementos da pagina.

Agora quanto ao atributo async da tag script, ele foi adicionado pelo HTML5, junto ao atributo defer.

  • async: Os scripts marcados com async irão executar em paralelo, ideal para scripts que não tem dependência entre si.
  • defer: Os scripts marcados com defer irão esperar que a pagina termine de carregar os elementos DOM para que seja executados, ou seja, um comportamente semelhante ao do document.addEventListener("readystatechange", () if (document.readyState == "interactive")) { ... }) e parecido ao de colocar o script no final do body.

Lembrando que estes dois atributos não tem efeito sobre scripts criados dinamicamente.

1
  • Pode explicar o motivo de recomendar o readystatechange em vez do onload? É uma questão de suporte? De poder interceptar um momento diferente do carregamento?
    – bfavaretto
    10/06/2017 às 18:32

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .