Lors de la consultation d’un site Internet, le navigateur charge toutes les ressources nécessaires pour afficher la page de la façon désirée. Tous les objets sont alors chargés, même s’ils ne se trouvent pas dans la zone visible, mais « below the fold » (fr. : en dehors du champ de vision). Certains temps de chargement sont toutefois inutiles et les développeurs peuvent les empêcher en utilisant le lazy loading. À l’aide d’un script tel que LazyLoad, le navigateur charge uniquement les images et les autres données lorsqu’elles apparaissent dans le « viewport » (la zone de visualisation) de l’utilisateur, par exemple en faisant défiler la page ou en augmentant la taille de la fenêtre du navigateur.
Le plus simple pour expliquer le fonctionnement de la méthode LazyLoad est de prendre l’exemple des objets image : afin de pouvoir utiliser le lazy loading, vous devez ajuster le marquage de la balise img. À la place de l’attribut src, cette méthode utilise un attribut data indiquant la source correspondante. Lorsque l’image apparaît dans la zone visible, le script correspondant ajoute l’attribut src à l’aide de l’attribut data et l’image apparaît. Afin de rendre le processus de chargement plus attrayant, vous pouvez utiliser des effets de « fade-in » (fr. fondu) ou de « slide-in » (fr. diaporama).