Uma das melhores melhorias no html nos últimos anos foi o atributo loading="lazy" que você pode adicionar às imagens (também iframes) que dirá aos navegadores para não carregarem o imagem até que esteja na janela de visualização.

Muito simples, muito útil. Mas não seria ótimo se você pudesse fazer isso também para scripts. Para que você possa carregar seus componentes preguiçosamente, somente se/quando eles forem realmente necessários...

Bem, outro recurso que o elemento possui é a capacidade de executar um script após a imagem carregar (ou não carregar) com os atributos onload e onerror.

Este "retorno de chamada" onload só será acionado quando a imagem for carregada e, se a imagem tiver sido carregada lentamente, ele será acionado somente quando a imagem estiver na janela de visualização. Et voilá! Um script carregado lentamente.

Infelizmente, assim, não adianta muito. Em primeiro lugar, você terá uma imagem indesejada em sua página e, em segundo lugar, precisará incorporar o javascript que deseja executar, o que anula o propósito do carregamento lento. Então, vamos fazer algumas alterações para melhorar isso.

A imagem em si pode ser qualquer coisa ou, mais importante, nada. Como mencionei anteriormente, existe o retorno de chamada onerror, que - como o nome sugere - será acionado quando a imagem não for carregada.

Isso não significa que você precisa apontar o src para uma imagem inexistente, isso resultaria em um console cheio de erros 404 vermelhos sobre imagens ausentes, e ninguém quer isso.

O retorno de chamada onerror também é acionado se a imagem src não for realmente uma imagem, e a maneira mais fácil de fazer isso é "codificar incorretamente" uma imagem usando o formato data:. Isso também tem a vantagem de não encher o console com avisos de imagens ausentes ?

Isso ainda fará com que a página tenha a miniatura da "imagem quebrada", mas chegaremos lá.

Ok, mas ainda precisamos incorporar o javascript que queremos executar, então como podemos consertar isso?

Bem, agora que o suporte ao módulo ES é quase universal, podemos usar a poderosa técnica de carregamento de javascript event-import-then-default para carregar um script após o disparo de um evento, assim:

Observação: isso também funciona para eventos onclick, onchange, etc.
Nota: Os sublinhados são apenas uma forma abreviada de acessar o Módulo, você também pode escrever .then(Module => Module.default(this))

Ok, então o que está acontecendo aqui!?

Primeiro, vamos dar uma olhada na aparência de alguns componentes:

// some-component.js

export default element => {
    element.outerHTML = `
        

            
Hello world!
        
    `;
}

Então, você deve ter notado que no retorno de chamada onerror, passei isso como um argumento para a exportação padrão. A razão pela qual fiz isto (desculpe o trocadilho?) foi para dar ao script o que o chamou, já que em isto (fiz de novo?) context this = .

Agora você pode simplesmente element.outerHTML para substituir a imagem quebrada por sua marcação HTML e aí está, scripts carregados lentamente! ?

Cache e passagem de argumentos

Se você estiver usando essa técnica mais de uma vez em uma página, precisará passar um índice de "quebra de cache" ou um número aleatório para os dados:, por exemplo, algo como:

A string após ":," pode ser qualquer coisa, desde que sejam diferentes.

Uma maneira muito simples de passar parâmetros para a função seria usar o atributo data-something no html assim:

Como estamos passando this para a função, você pode acessar os atributos de dados assim:

export default element => {
    const { message } = element.dataset
    element.outerHTML = `
        

            
${message}
        
    `;
}

Por favor, deixe-me saber o que você pensa nos comentários! ❤️