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

edgrbnz

Hey there Forum,

Since my old site was lacking the awesome control laytheme has I'm currently rebuilding my portfolio with the latter. I'm really pleased with what’s possible and am getting good results so far.

One thing I noticed:
When a project relies on transparent PNGs and you set a placeholder background color it stays behind said images after loading.
Since I'm using rather big images for my projects lazy loading is a nice feature but I cannot use it with the behaviour mentioned above. It would be cool to transition that background color to transparent or overall page-background color after images have loaded.

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.