🦥 Lazy Loading ⌛ von Bildern mit JavaScript (mit Animation)! 👍 [TUTORIAL]

preview_player
Показать описание
Lazy Loading ist Teil jeder Website und sollte daher möglichst einfach sein. In diesem Video zeige ich dir, wie man Lazy Loading nativ und wie man es mit JavaScript nutzen kann um 100% Score auf Google Page Speed zu erreichen!

Fragen oder Probleme? Werde Teil der Community! (Kostenlos)

Unterstütze den Channel:

Kapitel:
00:00 Einleitung
01:20 Demo
02:00 Native Lösung
02:53 Problem 1
04:19 Problem 2
04:54 Problem 2: Chrome
05:27 Problem 2: Edge
06:59 Setup
07:34 HTML & CSS
10:30 JavaScript
14:51 Ende

Links aus dem Video:

#Tutorial #JavaScript #LazyLoading

Meine Social Media Seiten:

Copyright by Johannes Schiel / Unleashed Design
  1. Unleashed Design
  2. Unleashed Design
  3. JavaScript Tutorial
  4. Lazy Loading Images
  5. img lazy loading
  6. loading="lazy"
Рекомендации по теме
Seo Quick Tipp: 0:03:13

Seo Quick Tipp: Lazy Loading von Bildern für eine schnellere Ladezeit

🦥 Lazy Loading 0:15:32

🦥 Lazy Loading ⌛ von Bildern mit JavaScript (mit Animation)! 👍 [TUTORIAL]

Jetpack Compose Tutorial 0:13:18

Jetpack Compose Tutorial 2023 | LazyColumn / LazyRows

Website Ladezeit verbessern 0:06:20

Website Ladezeit verbessern - Video Lazy Load / SEO #15

Lazy Load (Nachladen 0:05:41

Lazy Load (Nachladen von Bildern beim Scrollen) – Webdesign-Tutorial

Website Performance steigern 0:00:29

Website Performance steigern mit loading lazy - Klimaschutz durch eine Zeile HTML Code

Lazy loading with 0:02:49

Lazy loading with useFetch() | Nuxt Data Fetching

Wordpress schneller machen, 0:00:11

Wordpress schneller machen, bessere Performance: Lazy Loading für schnelle Webseiten #pagespeed #seo...

Was ist Lazy 0:00:14

Was ist Lazy Loading?

Ein Schritt-für-Schritt-Tutorial für 0:11:43

Ein Schritt-für-Schritt-Tutorial für das Reduzieren der Ladezeit mit JavaScript

Speed test - 0:05:21

Speed test - With Lazy Loading Proxies vs Without Lazy Loading Proxies

Ultimativer Leitfaden: Ladezeit 0:13:57

Ultimativer Leitfaden: Ladezeit von WordPress Websites optimieren

Larysa - Lazy 0:00:18

Larysa - Lazy Loading module.

5. Technische Grundlagen 0:23:51

5. Technische Grundlagen - Aus was besteht eine Website?

LiteSpeed Cache Settings 0:38:00

LiteSpeed Cache Settings Tutorial 2025 - Step-by-step Setup Guide - Best LiteSpeed Cache Settings

How to Turn 0:01:50

How to Turn Off Lazy Loading Shopify Speed

Lazy loading images 0:05:31

Lazy loading images using javascript

Gambio: Natives Lazy 0:05:38

Gambio: Natives Lazy Loading für mehr PageSpeed

Pinterest: Pinboards, Infinite-Scrolling, 0:00:27

Pinterest: Pinboards, Infinite-Scrolling, Lazy Loading, Adaptive Layouts

Lazy loading with 0:17:35

Lazy loading with Laravel Livewire

Resource Loading at 0:50:48

Resource Loading at the Cutting Edge | Robin Marx | performance.now() 2023

Bessere Performance und 0:00:22

Bessere Performance und Umweltschutz: Loading lazy HTML-Tag für Sustainable Webdesign

Now THIS is 0:00:59

Now THIS is entertainment! 🤣

Migrating from Packer.nvim 0:10:25

Migrating from Packer.nvim to Lazy.nvim

Комментарии
Автор

Super Struktur des Videos und auch sehr nachvollziehbar erklärt. Ich wollte "nur mal rein schauen" und habe das Video dann letzten Endes bis zum Schluss geschaut, was klar für den Aufbau und die Präsentation spricht. 🙂

nexTabDE
Автор

Super! Danke für das Video! Liebe Grüße aus Berlin

francescopaletta
Автор

Nette Lösung. Lässt sich ja nicht nur auf Images anwenden. Man könnte die Technik auch anwenden um Ressourcen zu sparen wie zb ein video Pausieren wenn man weiter scrolled.

goonswarm
Автор

Wie immer ein gute Idee, ich habe eine andere Frage welche Font nutzt du in VSCode

dePepisto
Автор

Top! 👍. Frage : kann man den gleichen Lazy loader script für SVG`s ( mit Animationen ) ?

DunnLewis
Автор

Moin, ich stehe momentan auf dem Schlauch. Ich hab ein Masonry Layout gebaut und wollte dieses Lazy Loading einbauen. Da die Bilder in der Masonry Berechnung fehlen verschiebt sich alles. Hat einer eine Idee?

kleckskeck
Автор

Danke schön, schöner Vorschlag, gefällt mir.
Was ich schon seit einigen Videos anmerken wollte:
Ich finde Deine Musik-Unterlegung, besonders im ersten Erklärungsteil etwas störend, etwas zu laut.
LG (ツ)

frankiberlin
Автор

Ja tolles Video, allerdings bin ich immer noch gegen reine JavaScript Lösungen. Außerdem mäckert zurecht immer noch der W3C über ein nicht vorhandenes bzw. leeres src-Attribute. Und wie das mit Barrierefreiheit aussieht, weiß ich auch nicht so genau...

Teisi
Автор

Die JavaScript Lösung braucht unbedingt einen Fallback zum data-src Attribut. Sobald JavaScript nicht lädt, oder main thread blockiert hat man gar keine Bilder mehr. Man könnte auch eine Verbesserung machen, indem man nur die Bilder auf lazy-load stellt, die unterhalb des "fold" liegen. Quasi nicht innerhalb des initialen Viewports mit scrollTop z.B.

supportic
Автор

Oh Gott und ich Idiot hab in JavaScript mit nem ScrollListener und ViewHight herumgepfuscht...

Danke für den einfachen Weg...

KiSmooth