Lazy Load Images / Image Placeholder Background Color stays behind transparent PNGs

[mariusjopen]

Dear @edgrbnz

can you provide a link to your website that we can see what you mean?

Thank you!

Mariu

[edgrbnz]

I sent you a link and password to have a look. Beware,… it’s all very work-in-progress by now.

[mariusjopen]

Dear @edgrbnz
the password does not work.

Best!

Marius

[edgrbnz]

@mariusjopen I sent the correct one,… sorry.

Just to make sure:
the red backgrounds shouldn‘t be there. It’s just a random color I chose to make the above mentioned behaviour visibile.

For my understanding it would be logical to hide the placeholder background color of the lazy load images as soon as the images have loaded.
I could choose to have no placeholder background color for lazy load images which causes a bit of a usability issue since the user doesn’t know if there are images being loaded or the page is just blank.

[mariusjopen]

Dear @edgrbnz
I am checking with Armin.

Will let you know soon.

Best!

Marius

[edgrbnz]

Thank you!

[edgrbnz]

Just wee little bump, to check if there are any news regarding this.

[arminunruh]

Hey one easy solution would be to not use a png
or set the Image Placeholder Background Color back to transparent

there is no easy way to make the placeholder color disappear when ur image has loaded

take a look at https://github.com/aFarkas/lazysizes
lazysizes has some javascript events like "lazyloaded" that fire when an image has loaded.

Add this to "lay options" -> "custom <head> content":

<script>
jQuery(document).on('lazyloaded', function(e){
    if( jQuery(e.target.parentNode).hasClass('img') ){
        jQuery(e.target).next('.ph').css('background-color', 'transparent');
    }
});
</script>

[edgrbnz]

@arminunruh Thank you!
The code works fine! Is there any way to ease-out the transition to transparent?

Hey one easy solution would be to not use a png

True!
But I wanted to prevent that (font-based) images look blury because of jpeg-compression and also wanted the background color of given images to appear in the same shade as the page background. (which is sometimes not controllable dependig on color renderung and image profiles)

[mariusjopen]

Dear @edgrbnz

add this to your custom CSS:

.ph { transition: 0.2s ease; }

Let me know if that worked well.

Best!

Marius

[edgrbnz]

@mariusjopen said in Lazy Load Images / Image Placeholder Background Color stays behind transparent PNGs:

.ph { transition: 0.2s ease; }

It kinda works. On some images (gifs) the background just stays behind the images. I think I'll stick with load images instantly. And try to keep the file sizes to a minimum.