filmov
tv
Native Lazy Loading + A Fallback Solution ..in 60 seconds
Показать описание
(Codepen code below) Chrome just released native lazy loading, so here's an insanely succinct video that will show you how to get up and running with a fallback solution using 'lazysizes'.
Tutorial dialogue:
"First, we need to enable lazy loading in the chrome flags because this is, well, sort of new..
Intially, we'll load these images without lazy loading, just to show you what the network tab looks like -- you're pointlessly loading all of this content when a user might not scroll down! (WASTE OF BANDWIDTH)
We're going to change the src attribute to a custom attribute, and add loading="lazy" to make this work..
Next, we write a bit of JavaScript to determine if the browser supports native lazy loading. Yay, ours does!
If it does support it, we iterate through our images and add the src attribute.
If there's no support, we can dynamically include a javascript src to a third party lazy loading library like lazysizes as a fallback!
Check it out, it's only loading the first few images. As the user scrolls, it works, yay!
For the fallback, add the lazyload class. Try it out in a non supporting browser like firefox and watch it work!"
This tutorial was based on the great content about native lazy loading found here:
What's up with the 60 second format? I stumbled across another channel in a different niche that provides 60 second tutorials and thought I'd give it a shot. Thoughts?
Sign up to my UI design course coming out very shortly!
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Come to my discord server or add me on social media and say Hi!
Tutorial dialogue:
"First, we need to enable lazy loading in the chrome flags because this is, well, sort of new..
Intially, we'll load these images without lazy loading, just to show you what the network tab looks like -- you're pointlessly loading all of this content when a user might not scroll down! (WASTE OF BANDWIDTH)
We're going to change the src attribute to a custom attribute, and add loading="lazy" to make this work..
Next, we write a bit of JavaScript to determine if the browser supports native lazy loading. Yay, ours does!
If it does support it, we iterate through our images and add the src attribute.
If there's no support, we can dynamically include a javascript src to a third party lazy loading library like lazysizes as a fallback!
Check it out, it's only loading the first few images. As the user scrolls, it works, yay!
For the fallback, add the lazyload class. Try it out in a non supporting browser like firefox and watch it work!"
This tutorial was based on the great content about native lazy loading found here:
What's up with the 60 second format? I stumbled across another channel in a different niche that provides 60 second tutorials and thought I'd give it a shot. Thoughts?
Sign up to my UI design course coming out very shortly!
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Come to my discord server or add me on social media and say Hi!
0:01:00
Native Lazy Loading + A Fallback Solution ..in 60 seconds
0:00:29
Easy browser-native image lazy loading with the `loading` attribute in HTML
0:00:24
React Native Lazy Loading Images Comparison
0:16:05
Lazy loading is too easy now
0:15:48
How To Load Images Like A Pro
0:07:31
Native image lazy loading feature | Google and Firefox
0:07:46
🔴 Lazy Loading - React Native | Engineer Codewala
0:00:43
Native image lazy-loading with the loading attribute
0:16:50
Speed Up Your React Apps With Code Splitting
0:01:24
How to Make Native Lazy Loading (without JavaScript)
0:06:11
Native Lazy Loading on the Web
0:16:22
Episode 3: Native Lazy Loading
0:06:57
Easy Way to Lazy Load Images using HTML Only | Native Lazy Loading
0:06:45
React Router Tutorial - 14 - Lazy Loading
0:11:21
Lazy Loading no React Native | Master Class
0:08:04
Lazy loading in React and Gatsby
0:03:38
Are you optimally loading your images?
0:04:45
New in Chrome 77: Native Lazy Loading, Largest Contentful Paint, and New Forms Capabilities
0:14:41
You are loading Images wrong! Use this instead 😍
0:00:38
Improve Your React App's Performance w/ Lazy Loading!
0:00:34
Lazy Loading in React Native. #reactnativetutorial #mobileappdevelopment #reactnative #codingsaga
0:00:42
Native Lazy Loading Chromium vs Firefox differences May 2020
0:11:20
Lazy loading and Suspense in React || Codenemy
0:11:11
Lazy Loading in entity framework core
Комментарии