Experimenting with "lazy loading" images

Discussion in 'Help and Feedback' started by Amin Sabet, Oct 21, 2015.

  1. Amin Sabet

    Amin Sabet Administrator

    Apr 10, 2009
    Boston, MA (USA)
    You may have noticed that when thread pages first load, images show a spinning wheel before showing. This allows the thread pages to show faster instead of waiting for the images to load.

    It can seem like the pages are slower when you are watching a spinning wheel, but actually they are loading faster.

    Let me know if you like or dislike.
     
    • Like Like x 1
  2. nstelemark

    nstelemark Mu-43 Hall of Famer

    May 28, 2013
    Halifax, Nova Scotia Canada
    Larry
    I really like lazy loading (always have). Thanks.
     
  3. RemiBureau

    RemiBureau Mu-43 Rookie

    22
    Jul 21, 2014
    Montreal
    Yes, nice feature, especially when ISP speeds are less than stellar!
     
    • Agree Agree x 1
  4. budeny

    budeny Mu-43 All-Pro

    Mar 4, 2014
    Boulder, CO
  5. nstelemark

    nstelemark Mu-43 Hall of Famer

    May 28, 2013
    Halifax, Nova Scotia Canada
    Larry
    This may be more of a browser issue. That page scrolls fine for me (the images come in over time but that does not make the scrolling choppy).
     
    • Agree Agree x 1
  6. tkbslc

    tkbslc Mu-43 Hall of Famer

    I don't have strong feelings about it, but I prefer the regular method.
     
  7. Amin Sabet

    Amin Sabet Administrator

    Apr 10, 2009
    Boston, MA (USA)
    Any other opinions?
     
  8. jyc860923

    jyc860923 Mu-43 Hall of Famer

    Feb 28, 2012
    Shenyang, China
    贾一川
    Does the spinning wheel act as place holder? The one thing I hate about Chrome is that I can't find an extension that locks the scroll position.
     
  9. Amin Sabet

    Amin Sabet Administrator

    Apr 10, 2009
    Boston, MA (USA)
    The spinning wheel is where the image will appear, but it doesn't have the same dimensions as the image, so the thread can move on you if the images are loading above your current position in the thread.

    I think this is a good addition to the forum. On a very fast connection like my home FIOS connection, it's hardly noticeable as the lazy loading happens so fast that I only briefly ever see the wheel. On my slower work and phone connections, the wheel is there, but it beats the alternative of loading the thread very slowly overall.
     
    • Like Like x 1
  10. NoSeconds

    NoSeconds Mu-43 All-Pro


    Doesn't make much difference at my speeds...


    Edit to add: My speeds are nothing flash either...
     
    Last edited: Oct 22, 2015
    • Appreciate Appreciate x 1
  11. eteless

    eteless Mu-43 All-Pro

    Jun 20, 2014
    Doesn't make a difference on my home connection, if you scroll to the bottom it sometimes jumps around for half a second after the page has 'loaded' however it's not noticeable if you open in a new tab then switch to it.

    I guess the bigger question is: does it work for the target audience with slower connections?
     
  12. Firedogg

    Firedogg Have cash, will spend

    Might be just me, but I love the spinning pin wheel.

    Small things amuse small minds...
     
    • Funny Funny x 2
  13. nstelemark

    nstelemark Mu-43 Hall of Famer

    May 28, 2013
    Halifax, Nova Scotia Canada
    Larry
    Hmm maybe that is why I did not notice any jerky scrolling. My home connection is pretty fast (100 down).
     
  14. Amin Sabet

    Amin Sabet Administrator

    Apr 10, 2009
    Boston, MA (USA)
    Yep, no laziness to the loading on 100 down ;).
     
  15. sesser

    sesser Zen Master

    489
    Mar 10, 2015
    Portland, OR
    randy
    The page is jerky if you scroll beyond a post with an image and that image loads after you past it. It causes the page content to get pushed downward (essentially, displacement). If it is at all possible to show a placeholder image (or empty div) that is the same size (or at least same height) as the image it is loading, that would solve the "jerky scrolling" issue. I kind of agree that the user experience is not as good as with the lazy loading in this case. Also, lazy loading images doesn't speed up the downloading of the HTML page to the browser, it just speeds up the time in which the onload event is fired... at least, in theory. Not sure about the particular library you're using or how it is implemented.

    Is the lazy load triggered by whether or not the image is in the viewport or are they all just deferred until the document is ready?
     
    • Appreciate Appreciate x 1
  16. barry13

    barry13 Super Moderator; Photon Wrangler

    Mar 7, 2014
    Southern California
    Barry
    Pages load faster on my iPad retina, using Chrome.

    There is some jumping back upwards however, when trying to go to the first unread post.

    Thanks!
    Barry
     
    • Appreciate Appreciate x 1
  17. Amin Sabet

    Amin Sabet Administrator

    Apr 10, 2009
    Boston, MA (USA)
    This is the addon I installed: https://xenforo.com/community/resources/lazy-load-img.3979/

    It's based on Unveil: http://luis-almeida.github.io/unveil/

    I asked the developer if they can do something along the lines of your suggestion: https://xenforo.com/community/threads/lazy-load-img.91376/page-3#post-998699

    One issue may be the placeholder size interfering with the automatic resizing to the browser window dimensions.

    It's triggered when the image is within 200px of the viewport. I can change that value.
     
  18. PacNWMike

    PacNWMike Mu-43 Hall of Famer

    Dec 5, 2014
    Salish Sea
    guess?
    Definitely better out here on the rusty wire (~3 down)
     
    • Like Like x 1
  19. Amin Sabet

    Amin Sabet Administrator

    Apr 10, 2009
    Boston, MA (USA)
    I reverted this as well as some other changes I made recently. Will reintroduce them if I can work out the bugs on the test site.
     
  20. sesser

    sesser Zen Master

    489
    Mar 10, 2015
    Portland, OR
    randy
    I could see where it would be difficult to manage detecting the height of images. You can't do it alone with JavaScript and using PHP to read every single image loaded on a page would be a performance nightmare. Especially when you can post content with links to images hosted anywhere. Being a photo enthusiast site, I would guess most people assume the site is going to be image heavy. I'm not sure there's a way around it. You could minimize slow load times with a CDN (which looks like you might already be doing), but that only works for images hosted on this site... Good luck Amin. :)