Skip to content
  • Recent
  • Tags
  • Popular
  • Users
  • Search
Skins
  • Light
  • Brite
  • 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. General Discussion
  3. Preload all images at once

Preload all images at once

Scheduled Pinned Locked Moved General Discussion
22 Posts 3 Posters 4.0k Views 2 Watching
  • 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.
  • arminunruhA arminunruh

    i see i see

    maybe its because i set images to opacity:0; and only once they are loaded they are set to opacity:1;

    can u try this css

    img{
    opacity: 1!important;
    }
    

    does that make a difference?

    the hellome studio website - i coded this website and i used the same way of loading images there

    otherwise if i load all images at once, it had taken a very long time until the first image showed up

    P
    P
    pavloradich
    wrote on last edited by
    #13

    @arminunruh or this: https://www.vrints-kolsteren.com (images load from colors)

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

      well usually if you just use lazyload instead of turning it off, it will just fade in the image once you scroll to it…
      if you remove this css

      img{
      opacity: 1!important;
      }

      ususally i think even with lazyloading turned off, it should fade in.

      remove the css above

      now use this css:

      img{
      transition: opacity 300ms ease!important;
      }

      with lazyload still off

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

        or this: https://www.vrints-kolsteren.com (images load from colors)

        in lay options there is the placeholder color option

        if u want to use custom css you can change the color on a per image basis, but yea theres no way to have this automatically

        1 Reply Last reply
        0
        • arminunruhA arminunruh

          well usually if you just use lazyload instead of turning it off, it will just fade in the image once you scroll to it…
          if you remove this css

          img{
          opacity: 1!important;
          }

          ususally i think even with lazyloading turned off, it should fade in.

          remove the css above

          now use this css:

          img{
          transition: opacity 300ms ease!important;
          }

          with lazyload still off

          P
          P
          pavloradich
          wrote on last edited by pavloradich
          #16

          @arminunruh hi Armin. Just tried what you suggested:

          "remove the css above
          now use this css:

          img{
          transition: opacity 300ms ease!important;
          }

          with lazyload still off"

          Unfortunately, it only affects the fade duration when you reload the page. It doesn't add the fade on images when you scroll at them, and they load in the same choppy way as before :(

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

            ok so then can u just enable lazyloading again

            P 1 Reply Last reply
            0
            • arminunruhA arminunruh

              ok so then can u just enable lazyloading again

              P
              P
              pavloradich
              wrote on last edited by
              #18

              @arminunruh did that, and nothing changed. As I mentioned above, it only affects the loading of the whole page when I reload it, but it doesn't change any behavior of the image-by-image loading as I scroll. You can even see it yourself if you try it from the client side. The images load in a choppy way, not in a smooth way. Sorry for bothering but I really would like to solve it.

              1 Reply Last reply
              0
              • P
                P
                pavloradich
                wrote on last edited by
                #19

                here's a perfect example of the image loading behavior I would like to achieve:

                https://www.baenziger-hug.com

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

                  sure,

                  can you send your website address, /wp-admin/ username and password and a link to this topic to info@laytheme.com?

                  let me look at this more

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

                    https://www.baenziger-hug.com/

                    this website has lazyloading and when an image loads it fades in

                    P 1 Reply Last reply
                    0
                    • arminunruhA arminunruh

                      https://www.baenziger-hug.com/

                      this website has lazyloading and when an image loads it fades in

                      P
                      P
                      pavloradich
                      wrote on last edited by
                      #22

                      @arminunruh yes, but somehow lay theme's lazyloading doesn't look anywhere close. That website has this smooth appearance. Just sent you the email.

                      1 Reply Last reply
                      0

                      Hello! It looks like you're interested in this conversation, but you don't have an account yet.

                      Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (either via email, or push notification). You'll also be able to save bookmarks and upvote posts to show your appreciation to other community members.

                      With your input, this post could be even better 💗

                      Register Login
                      Reply
                      • Reply as topic
                      Log in to reply
                      • Oldest to Newest
                      • Newest to Oldest
                      • Most Votes


                      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