Have it a quick try. The jump of the image is gone. But the late loading is still there. Doing a very slow middle mouse button scroll upward, the image replaces when I get halfway a lowercase letter on the second line of the article title.

Without using extra plugins with more JavaScript to control it, that's just Firefox's default visibility line of when it decides to load in lazy content. You can adjust that yourself in Firefox config settings. Unless I'm not understanding your issue now.

Issue is that I still get what the first picture shows. Only the image position remains the same now.

On only found this setting:

layout.framevisibility.amountscrollbeforeupdatevertical

Changing it can make things worse, but not better it seems. Are there others?

It's stuff like this:

dom.image-lazy-loading.root-margin.top
The margins on each direction control it. The higher the margin, the sooner Firefox loads content in. Some genius decided to set the defaults to nothing in Firefox it appears which is really bad.

Set it to 500 and it works.

However, this seems very much like a flawed solution. Since the margin appear to be in pixels, there is no way to get it correct. Larger image means the problem comes back.

To be honest, this screams bug. If the margin was calculated from the bottom of the image, then even zero wouldn't have been a real problem. But at 0 it is triggered around 50 pixels from the top, which makes no sense at all.

Yeah, it's not based on each image, it's based on your viewport.

Same thing, isn't it. Either you put a margin around the image or the viewport. The effect is the same, the image is loaded when it comes with x pixels of the viewport. But fair, the viewport makes more sense since there appears to be a percentage option as well.

However, even at zero, the image should be loaded if even one pixel appears on screen. And it isn't.

Ok, so I had a look at the html/css and it seems pretty clear to me. The image has no width/height tag. And since the image isn't loaded, Firefox has no way of determining when the image comes into view. And saying that Firefox doesn't have sane defaults is unfair because right now you're using the "defaults" (presumably of chrome) to cover for the fact that you don't specify the size. So from my limited investigation, it looks like this one is not Firefox's fault.

I'm getting what you mean now.

The problem there, is we're using a fully responsive percentage width image, we can't set a specific height and width on it. The only other way would be to re-do the layout, providing a couple different images based on viewport size. That's not a quick job for such a small issue.

Edit: Have removed the blurry image, not working as expected, will probably remove native-browser lazy loading too. None of this seems to work well in Firefox for responsive images and it's not worth the headaches and time wasted on it. May look to a different solution.

Okay, after more research and a determination not to give up, I believe it is solved! Many thanks, Ehvis, for pointing it out. Turns out, if you add the exact height and width of the original image, then still set the responsive via CSS BUT add height to "auto" it will maintain the responsiveness while also tell the browser the size for it. In my testing in Firefox, this appears to now correctly load in the image in a reasonably way with lazy loading :D

Please let me know how it is for you now!

Last edited by Liam Dawe on 21 Apr 2020 at 10:22 pm UTC

I can't detect any loading, so working perfectly for me! Excellent job!

Good, it's a little overzealous if you're on full-screen size since it's going by the real image size, but it still saves quite a bit on loading time/data on first load :) which was the whole point.