I'm really excited about the upcoming loading attribute in HTML.
<img src="example.jpg" loading="lazy" alt="example" />
<iframe src="ex...
For further actions, you may consider blocking this person and/or reporting abuse
Awesome.
Only question is, is there native support too for placeholder image before the lazy loaded image comes in?
Checked the Addy link, didn't seem to notice any placeholder option natively.
I'm terribly excited about this. The less JS, the better.
I think it would make sense to put that as a CSS pseudo-class. Could be useful with a broken image pseudo-class too.
WHATWG issue for placeholders: github.com/whatwg/html/issues/3631
This is absolutely fantastic! Especially since it's arriving just in time to prevent me from learning to do this the hard (current) way.
Now if we could only get Safari to respond to
<input type="date">
...I'm struggling to see how this feature will be effective if it has to fetch the first 2KB of all images on page-load, just to determine what images are in viewport. Let's say I have 20 images stacked on top of each other ... The browser will need to make 20 image requests to determine which images are in viewport, and only then will it start loading the full images that are within viewport. That's 22 server requests even if there are only 2 images in viewport, something which might slow down the response. And it means 40 server requests for 20 images on a page in total, basically doubling the amount requests.
One could include correct intrinsic placeholders for the images in the layout, but then what would be the point of the browser pre-fetching 2KB data from each image in the first place? Waste of requests and bandwidth.
For now, modern JS IntersectionObserver seems more effective, causing much less requests, only for images in viewport.
Did I miss something?
You bring up a very valid point, but I think that the amount of image bloat on most sites these days still makes it a huge net gain at the end of the day.
Sweet!
We are waiting for this the long time. I hope that others browsers (firefox and safari) implement this specifications so fast.
This almost feels like it should be the default behavior for a browser. I get there's potentially a lot of backwards compatibility issues with that, but that's letting legacy get in the way of a superior web experience.
Try Something new:::
Lazy Loading Images and Video Following By Google:
============Try New==================
================ JS Link ===============
developers.google.com/web/fundamen...
+++++++++++++++++++++++++++++++++++++++++
I was try this into my website
ictseller.com
This is the doble best solution.
Wow!! I hope that we get polyfills too!
@markel , I've developed one: github.com/mfranzke/loading-attrib...
That means it's something not in the spec that will be at some point. The world's not out to get you 🙂
Happy news😊
Wow! This is great stuff. Can't wait for the next Chrome update!
Very cool!
that's super cool. I'd rather do this than insert javascript between my content and the reader. The browser was meant to do this kind of work.
Yeeeesssss
It's something being added to the spec, it was actually an engineer at the BBC that suggested the feature 🙂
Isn't the web great 😃
Awesome! Can't wait for this 🙏
Yay, that's cool.
Wish they add placeholder too.
@Jaaki, see dev.to/malvoz/comment/d48f
It's the PR Ben linked in the article.