L'une des meilleures améliorations apportées au HTML au cours des dernières années a été l'attributloading="lazy" que vous pouvez ajouter aux images (également aux iframes) et qui indiquera aux navigateurs de ne pas charger le fichier. image jusqu'à ce qu'elle soit dans la fenêtre.

Très simple, très utile. Mais ne serait-ce pas génial si vous pouviez également faire cela pour les scripts. Pour que vous puissiez charger paresseusement vos composants, seulement si/quand ils sont réellement nécessaires...

Eh bien, une autre fonctionnalité de l'élément est la possibilité d'exécuter un script après le chargement de l'image (ou ne se charge pas) avec les attributs onload et onerror.

Ce "rappel" de chargement ne sera déclenché que lorsque cette image est chargée, et si l'image a été chargée paresseusement, elle ne se déclenchera que lorsque l'image sera dans la fenêtre d'affichage. Et voilà ! Un script chargé paresseusement.

Malheureusement, comme ça, ça ne sert pas à grand-chose. Premièrement, vous aurez une image indésirable sur votre page, et deuxièmement, vous devrez intégrer le javascript que vous souhaitez exécuter, ce qui va un peu à l'encontre de l'objectif du chargement paresseux. Apportons donc quelques modifications pour améliorer cela.

L'image elle-même peut être n'importe quoi, ou, plus important encore, rien. Comme je l'ai mentionné plus tôt, il existe le rappel d'erreur qui, comme son nom l'indique, se déclenche lorsque l'image ne se charge pas .

Cela ne signifie pas que vous devez pointer le src vers une image inexistante, cela entraînerait une console pleine d'erreurs 404 rouges concernant les images manquantes, et personne ne veut cela.

Le rappel onerror se déclenche également si l'image src n'est pas réellement une image, et le moyen le plus simple de le faire est de "mauvais encoder" une image en utilisant le format data:. Cela présente également l'avantage de ne pas remplir la console d'avertissements d'images manquantes ?

La page aura toujours la vignette « image cassée », mais nous y reviendrons.

Ok, mais nous devons toujours intégrer le javascript que nous voulons exécuter, alors comment résoudre ce problème ?

Eh bien, maintenant que la prise en charge du module ES est presque universelle, nous pouvons utiliser la très puissante technique de chargement javascript event-import-then-default pour charger un script après le déclenchement d'un événement, comme ceci :

Remarque : Cela fonctionne également pour les événements onclick, onchange, etc.
Remarque : les traits de soulignement ne sont qu'un moyen abrégé d'accéder au module, vous pouvez également écrire .then(Module => Module.default(this))

Ok, alors que se passe-t-il ici !?

Voyons d'abord à quoi pourrait ressembler certains composants :

// some-component.js

export default element => {
    element.outerHTML = `
        

            
Hello world!
        
    `;
}

Ainsi, vous avez peut-être remarqué que lors du rappel d'erreur, j'ai passé ceci comme argument à l'exportation par défaut. La raison pour laquelle j'ai fait this (excusez le jeu de mots ?) était pour donner au script le qui l'appelait, puisque dans this (je l'ai refait ?) contexte this = .

Maintenant, vous pouvez simplement element.outerHTML pour remplacer l'image cassée par votre balisage html et voilà, des scripts chargés paresseusement ! ?

Mise en cache et transmission d'arguments

Si vous utilisez cette technique plus d'une fois sur une page, vous devrez alors transmettre un index de "cache-busting", ou un nombre aléatoire aux données :, par exemple, quelque chose comme :

La chaîne après le ":" peut être n'importe quoi, à condition qu'elle soit différente.

Un moyen très simple de transmettre des paramètres à la fonction serait d'utiliser l'attribut data-something dans le code HTML comme ceci :

Puisque nous transmettons ceci à la fonction, vous pouvez accéder aux attributs de données comme ceci :

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

            
${message}
        
    `;
}

N'hésitez pas à me dire ce que vous en pensez dans les commentaires ! ❤️