This simply takes all images, and adds the loading=lazy attribute. Something like so : import from 'img:not()'Įl.tAttribute('loading','lazy') If we want to set all images to be lazy loaded by default, then it’s actually rather easy using Angular Directives.
Seems easy right? But what if you just want to add lazy loading to every image on your site, and not have to go back and manually add it everywhere? Add Lazy Loading Globally If we check however : there is actually great support and it’s really only old browsers such as IE, and Safari that haven’t quite implemented it yet. Notice how the src attribute is still set like normal? That’s important because it provides backwards compatibility for any browser that doesn’t support Lazy Loading. To lazy load an image, simply add the loading=”lazy” attribute like so : Meaning that there’s no javascript snippets required! Just a small attribute on an image and the browser will take care of when the image should be loaded! Often this leads to a much smoother experience (And one that the browser has obviously optimized for). Not ideal!īut browsers now support lazy loading out of the box. While this works, it can often lead to weird loading phases where you see the image flash while you scroll over it. The interesting thing about this is that much of the guides out there will focus on javascript snippets that utilize something like swapping a data-src attribute to the src attribute of an image based on where the page is currently scrolled to. That is, when your website first loads, only show images that are actually visible on screen, then as you scroll, load additional images as you go. If you’ve ever run a website through a pagespeed analyzer like Google’s Site Speed or GTMetrix, you’ve probably seen a recommendation that you should lazy load images below the fold.
0 kommentar(er)
