Einblend-Effekt für Bilder mit LazyLoad

WP Rocket stellt dir das smarte LazyLoad-Feature für Bilder und iFrames (inklusive Videos) zur Verfügung. Diese Ressourcen werden erst geladen, wenn sie im Browser-Fenster angezeigt werden müssen. Dadurch macht LazyLoad deine Website sehr viel schneller.

Grundsätzliches zu LazyLoad

Das LazyLoad-Skript speichert die URL deines Bildes in einem  data-lazy-src-Attribut. Außerdem kopiert es, für bessere SEO und Accessibility, das originale Bild-Element in ein <noscript>-Tag. Sobald die Scroll-Position im Browser die Position erreicht, an der das Bild dargestellt werden muss, wird die Platzhalter-URL mit der echten Bild-URL aus data-lazy-src ersetzt, und das Bild erscheint.

Einfache CSS3-Lösung für sanftes Einblenden

Der folgende CSS-Code sorgt dafür, dass dein Bild mit LazyLoad nicht plötzlich erscheint, sondern sanft eingeblendet wird:

/* Image with 'data' attribute is hidden */
img[data-lazy-src] {
   opacity: 0;
}
/* Image without 'data' attribute is (or becomes) visible */
img.lazyloaded {
   -webkit-transition: opacity .5s linear 0.2s;
       -moz-transition: opacity .5s linear 0.2s;
                 transition: opacity .5s linear 0.2s;
   opacity: 1;
}

(Browser-Kompatibilität: alle gängigen Browser mit CSS3-Unterstützung)