Lazy Load Images / Image Placeholder Background Color stays behind transparent PNGs
-
www.mariusjopen.world
-
@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. -
-
Hey one easy solution would be to not use a png
or set the Image Placeholder Background Color back to transparentthere 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> -
@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) -
Dear @edgrbnz
add this to your custom CSS:
.ph { transition: 0.2s ease; }Let me know if that worked well.
Best!
Marius
-
@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.
I also code custom websites or custom Lay features.
💿 Email me here: 💿
info@laytheme.com
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it
