Zitat:
Zitat von Basti82
Ich suche nach einer guten Lösung für Responsive Image und Lazy Loading wie man es heute umsetzt.
Seit langer Zeit verwende ich immer data-src mit javaScript :
HTML-Code:
<a href="/here-is-a-link/" title="Test Image">
<img
src="https://xhtmlforum.de/.../csm_domenico-loia-hGV2TfOh0ns-unsplash_24771fe133.jpg"
data-src="https://xhtmlforum.de/.../csm_domenico-loia-hGV2TfOh0ns-unsplash_24771fe133a.jpg"
data-bigger=".../csm_domenico-loia-hGV2TfOh0ns-unsplash_24771fe133b.jpg"
data-large=".../csm_domenico-loia-hGV2TfOh0ns-unsplash_24771fe133.jpg"
data-medium=".../csm_domenico-loia-hGV2TfOh0ns-unsplash_24771fe133f.jpg"
data-small=".../csm_domenico-loia-hGV2TfOh0ns-unsplash_24771fe133e.jpg"
title="Test Image"
alt="Test Image"
class="lazyload img-fluid border-0 rounded-0 mb-6"
data-preload="true"
style="opacity: 1;"
>
<noscript>
<img src="https://xhtmlforum.de/.../csm_domenico-loia-hGV2TfOh0ns-unsplash_24771fe133.jpg" title="" alt="" />
</noscript>
</a>
In diesem Beispiel scheidet und verkleinert mir das CMS die Bilder in den richtigen Auflösungen / Größen.
Gibt es denn mittlerweile bessere Lösungen?
Besonders was den Suchmaschinen gefällt und den Pagespeed verbessert? |
Also es gibt mittlerweile viele Lösungen die häufig mit Frameworks wie JQuery umgesetzt werden, hier habe ich allerdings ein Beispiel mit Javascript
:
Code:
document.addEventListener("DOMContentLoaded", function() {
var lazyloadImages = document.querySelectorAll("img.lazy");
var lazyloadThrottleTimeout;
function lazyload () {
if(lazyloadThrottleTimeout) {
clearTimeout(lazyloadThrottleTimeout);
}
lazyloadThrottleTimeout = setTimeout(function() {
var scrollTop = window.pageYOffset;
lazyloadImages.forEach(function(img) {
if(img.offsetTop < (window.innerHeight + scrollTop)) {
img.src = img.dataset.src;
img.classList.remove('lazy');
}
});
if(lazyloadImages.length == 0) {
document.removeEventListener("scroll", lazyload);
window.removeEventListener("resize", lazyload);
window.removeEventListener("orientationChange", lazyload);
}
}, 20);
}
document.addEventListener("scroll", lazyload);
window.addEventListener("resize", lazyload);
window.addEventListener("orientationChange", lazyload);
});
nachdem der DOM geladen wurde, werden die Images nach und nach nachgeladen beim Scrollen