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. General Discussion
  3. Preload all images at once

Preload all images at once

Scheduled Pinned Locked Moved General Discussion
22 Posts 3 Posters 391 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.
  • P Offline
    P Offline
    pavloradich
    wrote on last edited by
    #1

    Hi, I would like to know how to preload all images at once?
    Turning off the "Lazy loading" doesn't do any difference.

    Thank you

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

      hey there!
      if you turn off lazyload, all images in the viewport will be loaded first, then all the other images are loaded.

      why do you need a different behaviour?

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

        I would like to preload all images on the page at once because I'm a little annoyed by this appearance that my images have, they all take like 1/10 of a second to appear and this constant flicking just doesn't look good.

        So I would like to know how to make them load once I enter the page.

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

          do u have a link

          P 1 Reply Last reply
          0
          • arminunruhA arminunruh

            do u have a link

            P Offline
            P Offline
            pavloradich
            wrote on last edited by
            #5

            @arminunruh https://pavloradich.com/home-copy-2/?preview_id=1193&preview_nonce=a925ffcaa1&preview=true

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

              Screenshot 2024-05-04 at 11.37.35.png

              so when i enter the website all images are loaded.
              i think the issue is you need to disable "never show resized versions of images"

              because your images are too big! one of them is 16Mb!
              it takes about 12 seconds for me to load all images.
              Then i guess for images of that size, the browser probably just renders them when they come into view to save processing power, thats just my guess.

              because the code loads them and shows them without you having to scroll to them

              i think the browser needs a long time to load them and then needs a long time to render them.

              you can either disable this setting, or upload images that are smaller in filesize

              P 2 Replies Last reply
              0
              • arminunruhA arminunruh

                Screenshot 2024-05-04 at 11.37.35.png

                so when i enter the website all images are loaded.
                i think the issue is you need to disable "never show resized versions of images"

                because your images are too big! one of them is 16Mb!
                it takes about 12 seconds for me to load all images.
                Then i guess for images of that size, the browser probably just renders them when they come into view to save processing power, thats just my guess.

                because the code loads them and shows them without you having to scroll to them

                i think the browser needs a long time to load them and then needs a long time to render them.

                you can either disable this setting, or upload images that are smaller in filesize

                P Offline
                P Offline
                pavloradich
                wrote on last edited by pavloradich
                #7

                @arminunruh I knew you will say that, but those images are just a test. I will of course compress them and re-upload. Now, check this pageโ€“ https://pavloradich.com/home/, where images are not full screen, and also compressed โ€“ same choppy behavior, which normally I would be able to turn off by loading them all at once, once I enter the page.

                I also prefer not to turn on resizing, because then images are same chopped + blurry.
                Is there a custom code option for what I'm asking?

                1 Reply Last reply
                0
                • M Offline
                  M Offline
                  Melinda55
                  wrote on last edited by
                  #8

                  Why you want to preload images? It is unlikely to make any significant speed difference.

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

                    So they're loaded once I enter the page and don't start off-loading once I scroll past them, like on most websites. I would like to remove this flickering (images being off loaded and loaded again).

                    1 Reply Last reply
                    0
                    • arminunruhA arminunruh

                      Screenshot 2024-05-04 at 11.37.35.png

                      so when i enter the website all images are loaded.
                      i think the issue is you need to disable "never show resized versions of images"

                      because your images are too big! one of them is 16Mb!
                      it takes about 12 seconds for me to load all images.
                      Then i guess for images of that size, the browser probably just renders them when they come into view to save processing power, thats just my guess.

                      because the code loads them and shows them without you having to scroll to them

                      i think the browser needs a long time to load them and then needs a long time to render them.

                      you can either disable this setting, or upload images that are smaller in filesize

                      P Offline
                      P Offline
                      pavloradich
                      wrote on last edited by
                      #10

                      @arminunruh here for example images are not loading all the time, they just load once you enter and stay โ€“ https://hellome.studio

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

                        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 2 Replies Last reply
                        0
                        • 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 Offline
                          P Offline
                          pavloradich
                          wrote on last edited by pavloradich
                          #12

                          @arminunruh thank you, Armin. I pasted this in CSS and unfortunately nothing changed and images keep flicking as I scroll. Do you think there might be another css option? Perhaps there's a way I can implement some kind of smoother appearance? Sort of like a very quick fade out of white or a custom color like here (https://data-orbit.ch).

                          1 Reply Last reply
                          0
                          • 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 Offline
                            P Offline
                            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 Offline
                              arminunruhA Offline
                              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 Offline
                                arminunruhA Offline
                                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 Offline
                                  P Offline
                                  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 Offline
                                    arminunruhA Offline
                                    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 Offline
                                      P Offline
                                      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 Offline
                                        P Offline
                                        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 Offline
                                          arminunruhA Offline
                                          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
                                          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