Erreur de la base de données WordPress : [INSERT, UPDATE command denied to user 'soluka7akm0a'@'10.13.20.91' for table 'x4Cd9n_options']INSERT INTO `x4Cd9n_options` (`option_name`, `option_value`, `autoload`) VALUES ('_transient_doing_cron', '1733848924.4490849971771240234375', 'yes') ON DUPLICATE KEY UPDATE `option_name` = VALUES(`option_name`), `option_value` = VALUES(`option_value`), `autoload` = VALUES(`autoload`)
Vous êtes confrontés à des problèmes de performance sur votre site internet ? Lazy Load pourrait vous intéresser. C’est un plugin jQuery qui permettra à votre site d’optimiser le chargement des images.
On pourrait se demander s’il est nécessaire, pendant le chargement d’une page, de charger aussi toutes les images de cette dernière. En effet, il serait plus judicieux de ne charger que les images qui peuvent être visibles pour l’utilisateur, donc une fois qu’il aura scrollé dessus par exemple. C’est ce que Lazy Load vous permettra de réaliser.
Voici une démonstration de ce plugin :
Remarquez que malgré le nombre et la taille des images, la page se charge très rapidement.
C’est autour de ce plugin que nous allons construire notre petit tutoriel mais il en existe d’autres dans ce style tels que jQuery Lazy Image Loader ou encore BttrLazyLoading.
Il vous suffit de charger jQuery et jquery.lazyload.js (Lazy Load) dans votre fichier HTML :
L’utilisation de ce plugin est assez simple.
Le code HTML
Premièrement, du côté des images, dans le code HTML, voici ce que nous avons :
Dans ce bout de code, nous pouvons voir que 2 images sont appelées grâce aux attributs :
Même si vous ne voulez pas afficher de loader, je vous conseille de mettre quand même un attribut src à vos images afin de garder votre code valide W3C :
Le code JavaScript
Du côté du code JavaScript, une seule ligne suffit :
Comme vous pouvez le voir, il vous suffit de sélectionner toutes vos images avec la class que vous aurez prédéfinie (ici lazy) et de l’instancier avec le plugin Lazy Load.
Différentes options vous sont proposées en plus de l’utilisation basique de ce plugin.
Le threshold
Par défaut, les images n’apparaissent qu’une fois visibles à l’écran. Pour modifier cela, il faut augmenter l’attribut threshold
qui équivaut par défaut à 0. Si vous modifier ce dernier à 400, les images se chargeront 400 pixels avant qu’elle ne soient visibles à l’écran :
Les événements déclencheurs
Par défaut, c’est au scroll de l’utilisateur et seulement quand elle est visible à l’écran qu’une image se charge. Mais il est possible de déclencher son chargement avec d’autres événements tels que les événements jQuery (mousedown, mouseover, click) ou encore des événements personnalisés :
Les effets
Par défaut, le plugin utilise la méthode show()
de jQuery pour afficher les images mais il est possible d’ajouter un effet :
Les conteneurs
Ce plugin fonctionne aussi si votre image se trouve dans un conteneur scrollable autre que la page en elle-même. Pour permettre cela, il faut indiquer au plugin le conteneur de l’image en question :
Si le JavaScript est désactivé dans le navigateur de l’utilisateur, il est tout de même important de pouvoir afficher les images. Pour cela, il faut entourer vos images de la balise <noscript></noscript>
: