Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse

Lay Theme Forum

  1. Home
  2. Bug Reports
  3. Lazy Load Images / Image Placeholder Background Color stays behind transparent PNGs

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

Scheduled Pinned Locked Moved Bug Reports
12 Posts 3 Posters 1.7k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • edgrbnzE Offline
    edgrbnzE Offline
    edgrbnz
    wrote on last edited by edgrbnz
    #1

    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.

    ✦ ✦ ✦

    1 Reply Last reply
    0
    • mariusjopenM Offline
      mariusjopenM Offline
      mariusjopen
      Global Moderator
      wrote on last edited by
      #2

      Dear @edgrbnz

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

      Thank you!

      Mariu

      www.mariusjopen.world

      1 Reply Last reply
      0
      • edgrbnzE Offline
        edgrbnzE Offline
        edgrbnz
        wrote on last edited by
        #3

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

        ✦ ✦ ✦

        1 Reply Last reply
        0
        • mariusjopenM Offline
          mariusjopenM Offline
          mariusjopen
          Global Moderator
          wrote on last edited by
          #4

          Dear @edgrbnz
          the password does not work.

          Best!

          Marius

          www.mariusjopen.world

          edgrbnzE 1 Reply Last reply
          0
          • mariusjopenM mariusjopen

            Dear @edgrbnz
            the password does not work.

            Best!

            Marius

            edgrbnzE Offline
            edgrbnzE Offline
            edgrbnz
            wrote on last edited by edgrbnz
            #5

            @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.

            ✦ ✦ ✦

            1 Reply Last reply
            0
            • mariusjopenM Offline
              mariusjopenM Offline
              mariusjopen
              Global Moderator
              wrote on last edited by
              #6

              Dear @edgrbnz
              I am checking with Armin.

              Will let you know soon.

              Best!

              Marius

              www.mariusjopen.world

              1 Reply Last reply
              0
              • edgrbnzE Offline
                edgrbnzE Offline
                edgrbnz
                wrote on last edited by
                #7

                Thank you!

                ✦ ✦ ✦

                1 Reply Last reply
                0
                • edgrbnzE Offline
                  edgrbnzE Offline
                  edgrbnz
                  wrote on last edited by
                  #8

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

                  ✦ ✦ ✦

                  1 Reply Last reply
                  0
                  • arminunruhA Offline
                    arminunruhA Offline
                    arminunruh
                    Global Moderator
                    wrote on last edited by
                    #9

                    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>
                    
                    1 Reply Last reply
                    0
                    • edgrbnzE Offline
                      edgrbnzE Offline
                      edgrbnz
                      wrote on last edited by
                      #10

                      @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)

                      ✦ ✦ ✦

                      1 Reply Last reply
                      0
                      • mariusjopenM Offline
                        mariusjopenM Offline
                        mariusjopen
                        Global Moderator
                        wrote on last edited by
                        #11

                        Dear @edgrbnz

                        add this to your custom CSS:

                        .ph { transition: 0.2s ease; }
                        

                        Let me know if that worked well.

                        Best!

                        Marius

                        www.mariusjopen.world

                        1 Reply Last reply
                        0
                        • edgrbnzE Offline
                          edgrbnzE Offline
                          edgrbnz
                          wrote on last edited by edgrbnz
                          #12

                          @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.

                          ✦ ✦ ✦

                          1 Reply Last reply
                          1
                          Reply
                          • Reply as topic
                          Log in to reply
                          • Oldest to Newest
                          • Newest to Oldest
                          • Most Votes


                          I also code custom websites or custom Lay features.
                          💿 Email me here: 💿
                          info@laytheme.com

                          Before you post:
                          1. When using a WordPress Cache plugin, disable it or clear your cache.
                          2. Update Lay Theme and all Lay Theme Addons
                          3. Disable all Plugins
                          4. 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:
                          1. Post a link to where the problem is
                          2. Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
                          3. If the problem is difficult to explain, post screenshots / link to a video to explain it
                          Online Users
                          Forgot your key, lost your files, need a previous Lay Theme or Addon version? Go to www.laykeymanager.com
                          laytheme.com
                          • Login

                          • Don't have an account? Register

                          • Login or register to search.
                          • First post
                            Last post
                          0
                          • Recent
                          • Tags
                          • Popular
                          • Users
                          • Search