WP Rocket propose un syst\u00e8me de chargement asynchrone des images tr\u00e8s intelligent. Les images se chargent lorsqu\u2019elles apparaissent sur l\u2019\u00e9cran du visiteur.<\/p>
Par d\u00e9faut, le script propose de placer l\u2019URL de votre image dans l\u2019attribut Gr\u00e2ce au s\u00e9lecteur d\u2019attribut compatible depuis Internet Explorer 7, il est possible de cibler des \u00e9l\u00e9ments en fonction des attributs qu\u2019ils poss\u00e8dent.<\/p> Lorsque l\u2019attribut Il est donc possible de reconna\u00eetre diff\u00e9rents \u00e9tats de notre image :<\/p> Le code CSS suivant, que vous pouvez placer dans le fichier style.css de votre th\u00e8me, permet de proposer une animation d\u2019apparition (Fade In) :<\/p>data-lazy-src<\/code>. Il place aussi l\u2019image originale dans une balise <noscript><\/code> pour des raisons d\u2019accessibilit\u00e9 et de r\u00e9f\u00e9rencement. Lorsque votre image doit appara\u00eetre la valeur de data-lazy-src<\/code> vient remplacer le contenu de l\u2019attribut src<\/code> et fait appara\u00eetre l\u2019image de mani\u00e8re brute.<\/p>Une solution CSS3 tr\u00e8s simple<\/h2>
data-lazy-src<\/code> offre sa valeur \u00e0 l\u2019attribut src<\/code> de l\u2019image, il dispara\u00eet tandis que le src se compl\u00e8te.<\/p>data-lazy-src<\/code> est pr\u00e9sent)<\/li>\n\nsrc<\/code> commence th\u00e9oriquement par \u201chttp\u201d)<\/li><\/ul>