The Story
I have this internal tool for some purpose. Now, this has a page where it displays like 50+ images grid in smaller sizes.
The ...
For further actions, you may consider blocking this person and/or reporting abuse
You should keep in mind that the loading behaviour changes wildly from browser to browser.
Chrome loads images that are a long distance out of the viewport. Native lazy loading wouldn't even kick in here on short pages.
Firefox loads images only if they are in the viewport, leading to visible loading times for the user as she scrolls.
As of now, there's no way to control that behaviour.
Good tip 🤸.
Lazy loading attribute is supported in latest browser version so you may need to include polyfill to provide support for older browsers.
Yeah, But if you read the story part you'll understand why it was perfect for me
"The previous webpage is atleast 3 times as fast."
Thats a bit of a stretch without actually providing any example.
Yeah, I can understand that. But I'm just sharing how it felt like.
This isn't really a proper study. Just sharing the problem I faced and how I solved.
I really don't care about how much milliseconds I saved or if it works on Safari on iPhone 5 whatever.
This is a tool used by me and it works for me. So really doesn't matter
best stuff I learned this week. thanks a lot.
Make sure to add a fallback for browsers that don't support native lazy loading.
I love the native lazy loading. It's a big game-changer.
LOL, caniuse.com/#search=lazy Better to provide some polyfill version
That doesn't work yet on Apple devices...
For better performance you can also add width and height to the image tag if it’s available to you - you’re still able to force responsiveness through your CSS.
Yeah, this is something that could be done. But in my case, it didn't really matter