|
|||
![]()
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=".../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> Gibt es denn mittlerweile bessere Lösungen? Besonders was den Suchmaschinen gefällt und den Pagespeed verbessert? |
Sponsored Links |
|
|||
![]()
Du könntest srcset="bla" nutzen.
Schau mal hier: https://wiki.selfhtml.org/wiki/Bilde...er_mit_picture Entweder mit <picture> oder direkt im <img>. Ich muss aber gestehen gestehen, dass ich es selbst noch nicht verwendet habe. Nehme es mir aber schon länger vor. ![]() Anders sieht es bei loading="lazy" aus: https://wiki.selfhtml.org/wiki/HTML/Attribute/loading Das habe ich schon häufiger genutzt und es funktioniert überraschend einfach. ![]() |
Sponsored Links |
|
|||
![]()
picture und srcset für unterschiedliche Größen auf unterschiedlichen Devices. https://developer.mozilla.org/en-US/...ifferent_sizes
lazy loading mit lazy attribut wurde ja schon genannt. mehr braucht es heute nicht. Keinerlei JS dafür notwendig. |
|
|||
![]() Zitat:
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); });
__________________
Profi Webdesigner Sparkm4n - Webdesign Interessensthemen - HTML5 - JQuery - Javascript - PHP - Ergonomisches Webdesign |
![]() |
Stichwörter |
html 5, pagespeed, responsive, responsive image |
Themen-Optionen | |
Ansicht | |
|
|
![]() |
||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
mit Schleife Script reduzieren | css_user | Javascript & Ajax | 3 | 27.06.2013 15:51 |
CSS Hack | dalmidog | CSS | 1 | 28.03.2008 17:32 |
Imagemap Zugriff bei einer Gallery | Sarah14 | Javascript & Ajax | 3 | 12.11.2007 14:06 |