4 ms·

Lazy loading is a waste of time in my opinion. Yes it can save bandwidth but it actually creates an awful user experience. If you have a bunch of images you do

Lazy loading is a waste of time in my opinion. Yes it can save bandwidth but it actually creates an awful user experience. If you have a bunch of images you don't want to wait to load them until in view especially on a slow connection. If you lazy load the images then that means every time the user scrolls they have to wait for an image. No one is going to wait for your image to load, so they will scroll on. You then cause a bottleneck in your javascript because the user is scrolling and you are using JS to download images which is not optimal. The experience you want is to load the first image and then load then next image before the user gets to it so that it is ready when the user scrolls. Our browsers do a great job of this already. Don't reinvent the wheel. Our browsers have been optimized to download images the right way. And if you want to save bandwidth then use responsive images and let the browser determine the best size to download. I've implemented lazy load on mobile and learned this first hand. I thought I needed lazy load, but to my surprise, the browser actually knows how to load images the right way. My app actually had less jank and loaded images faster when I left the images up to the browser. Stop over engineering image loading please :-)

rorykoehler 11y ago
I often find myself first scrolling once to the bottom of the page before browsing lists of images if lazy load is implemented.
ivopetkov 11y ago
Usually when I am on a slow mobile connection, I open a lot of tabs. In this case, the benefits of lazy loading are clearly visible. I agree it will be great to load all images, and it will be awesome if we can detect in JavaScript there is available bandwidth and preload the images that are below the fold.
- cyberpanther 11y ago
  Again even if you could detect bandwidth, you wouldn't want to do this because the current bandwidth is not a prediction of the future bandwidth. So then you get into a game of trying to predict bandwidth which is a fools game. I think even Google stop trying to predict bandwidth with Android.
cm2187 11y ago
And it makes the website change its layout multiple times which makes it really impractical for reading. And it ensures any user who disabled javascript will browse away very quickly from your site.
- andy_ppp 11y ago
  No, this technique does not do that.
andy_ppp 11y ago
This is not what the article or the implementation does at all. This article/repo is arguably misnamed so I understand your confusion. The technique here is an excellent way to load only the right size images for different devices. It works in about 65% of browsers and has excellent fallback characteristics in others. Read the bottom of the blogpost here for details: http://ivopetkov.com/b/lazy-load-responsive-images/ http://ivopetkov.com/b/lazy-load-responsive-images/ P.S. I'm totally with you on pointless lazy-loading - the browser should figure out what is sensible to load based on available bandwidth and where I have scrolled to...
- voyou 11y ago
  From that link: "Lazy loading is a technique that defers image loading until it becomes visible on the screen." Isn't this exactly the "pointless lazy-loading" that you and the OP are complaining about? If what you want is to "load only the right size images for different devices," and you're targeting browsers that support srcset, you can just use srcset.
  - andy_ppp 11y ago
    Well I think this looks pretty good, the only issue is modern browsers without Javascript. It provides a lot of fallbacks that srcset does not on it's own. No, it's not pointless; I think it's actually quite useful if you rely on Javascript, which some say is the worst thing in the world... but after using React I've been persuaded for complex interfaces it can provide clear advantages over progressive enhancement.
    - ad-hominem 11y ago
      > modern browsers without Javascript Sorry, what browsers? There is no such thing. Even virtually everyone's phone runs javascript. The only way you are running a modern browser without JS is if you've (as a power-user) turned it off. In which case you need to turn it back on when you encounter weirdness on a website that expects that your browser behaves like a normal modern browser. If you run your browser without JS (like I do), then you encounter this situation frequently and it's part of the tradeoff of controlling exactly what code runs during your web experience.
deleted 11y ago
[deleted]
crucialfelix 11y ago
You are not supposed to wait until they are in the viewport. I use a 600px threshold so the visitor never sees anything on screen loading. If your page has lots of search results and lots of images it really saves a huge amount and makes the page feel much lighter.
- ivopetkov 11y ago
  That will be nice update. Thanks.

rorykoehler 11y ago

I often find myself first scrolling once to the bottom of the page before browsing lists of images if lazy load is implemented.

ivopetkov 11y ago

Usually when I am on a slow mobile connection, I open a lot of tabs. In this case, the benefits of lazy loading are clearly visible. I agree it will be great to load all images, and it will be awesome if we can detect in JavaScript there is available bandwidth and preload the images that are below the fold.

cyberpanther 11y ago
Again even if you could detect bandwidth, you wouldn't want to do this because the current bandwidth is not a prediction of the future bandwidth. So then you get into a game of trying to predict bandwidth which is a fools game. I think even Google stop trying to predict bandwidth with Android.

cm2187 11y ago

And it makes the website change its layout multiple times which makes it really impractical for reading. And it ensures any user who disabled javascript will browse away very quickly from your site.

andy_ppp 11y ago
No, this technique does not do that.

andy_ppp 11y ago

This is not what the article or the implementation does at all. This article/repo is arguably misnamed so I understand your confusion. The technique here is an excellent way to load only the right size images for different devices. It works in about 65% of browsers and has excellent fallback characteristics in others. Read the bottom of the blogpost here for details: http://ivopetkov.com/b/lazy-load-responsive-images/ http://ivopetkov.com/b/lazy-load-responsive-images/ P.S. I'm totally with you on pointless lazy-loading - the browser should figure out what is sensible to load based on available bandwidth and where I have scrolled to...

voyou 11y ago
From that link: "Lazy loading is a technique that defers image loading until it becomes visible on the screen." Isn't this exactly the "pointless lazy-loading" that you and the OP are complaining about? If what you want is to "load only the right size images for different devices," and you're targeting browsers that support srcset, you can just use srcset.
- andy_ppp 11y ago
  Well I think this looks pretty good, the only issue is modern browsers without Javascript. It provides a lot of fallbacks that srcset does not on it's own. No, it's not pointless; I think it's actually quite useful if you rely on Javascript, which some say is the worst thing in the world... but after using React I've been persuaded for complex interfaces it can provide clear advantages over progressive enhancement.
  - ad-hominem 11y ago
    > modern browsers without Javascript Sorry, what browsers? There is no such thing. Even virtually everyone's phone runs javascript. The only way you are running a modern browser without JS is if you've (as a power-user) turned it off. In which case you need to turn it back on when you encounter weirdness on a website that expects that your browser behaves like a normal modern browser. If you run your browser without JS (like I do), then you encounter this situation frequently and it's part of the tradeoff of controlling exactly what code runs during your web experience.

deleted 11y ago

[deleted]

crucialfelix 11y ago

You are not supposed to wait until they are in the viewport. I use a 600px threshold so the visitor never sees anything on screen loading. If your page has lots of search results and lots of images it really saves a huge amount and makes the page feel much lighter.

ivopetkov 11y ago
That will be nice update. Thanks.