Einzelnen Beitrag anzeigen
  #4 (permalink)  
Alt 17.12.2022, 03:58
Sparkm4n Sparkm4n ist offline
Neuer Benutzer
neuer user
 
Registriert seit: 14.12.2022
Ort: Dillenburg
Beiträge: 2
Sparkm4n befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von Basti82 Beitrag anzeigen
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
__________________
Profi Webdesigner
Sparkm4n - Webdesign

Interessensthemen
- HTML5
- JQuery
- Javascript
- PHP
- Ergonomisches Webdesign
Mit Zitat antworten