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

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.

Lay Theme Forum

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

Before you post:

When you post:

Online Users