4 ms·

Looks like the images only get loaded as you scroll down, which is a good feature that more sites should do. Seems like there's a fair amount of JavaScript bein

Looks like the images only get loaded as you scroll down, which is a good feature that more sites should do. Seems like there's a fair amount of JavaScript being loaded here, I wonder what non-obvious stuff is happening?

mercer 12y ago
Yeah, I've started using the 'load on demand' approach by default, unless the images are important. It can drastically improve load speed in a very simple way.
- mikeg8 12y ago
  Do you have any resources you'd recommend to get started learning this? It's a nice feature and I noticed it when the new YC page first loaded but have never investigated it myself.
  - mercer 12y ago
    There are probably jQuery plugins for 'lazy loading' images, but if you're familiar with javascript, and especially if you're using jQuery too, it's not too difficult to write a bit of code that takes care of this. The nice thing is that you can then combine this with responsive image loading (i.e. big images for desktop, small for mobile). I've agonized over the different solutions and concluded that, in most cases, a js-based solution to the image loading problem is the best (although I'm open to other opinions!). What it boils down to is this: - use markup that are either just divs with data-attributes, or image tags with the low-res images (if images are important for SEO or whatnot). - detect the device type or screen size - use javascript to calculate if the element is in view (usually calculating the image's offset from the top of the page is enough, since most sites are, uh, vertically-inclined) - load the appropriate image from the data-attribute with javascript if the image is visible. If you use placeholder images initially, I've noticed that the effect can actually look better than just showing the images right away. There's something about the images popping into view that makes the page feel more alive. For specific resources, I'd search 'check if image is visible' (with or without jQuery). You'll probably find some plugins or some code that might show how to do this. Feel free to approach me if you can't work it out.

mercer 12y ago

Yeah, I've started using the 'load on demand' approach by default, unless the images are important. It can drastically improve load speed in a very simple way.

mikeg8 12y ago
Do you have any resources you'd recommend to get started learning this? It's a nice feature and I noticed it when the new YC page first loaded but have never investigated it myself.
- mercer 12y ago
  There are probably jQuery plugins for 'lazy loading' images, but if you're familiar with javascript, and especially if you're using jQuery too, it's not too difficult to write a bit of code that takes care of this. The nice thing is that you can then combine this with responsive image loading (i.e. big images for desktop, small for mobile). I've agonized over the different solutions and concluded that, in most cases, a js-based solution to the image loading problem is the best (although I'm open to other opinions!). What it boils down to is this: - use markup that are either just divs with data-attributes, or image tags with the low-res images (if images are important for SEO or whatnot). - detect the device type or screen size - use javascript to calculate if the element is in view (usually calculating the image's offset from the top of the page is enough, since most sites are, uh, vertically-inclined) - load the appropriate image from the data-attribute with javascript if the image is visible. If you use placeholder images initially, I've noticed that the effect can actually look better than just showing the images right away. There's something about the images popping into view that makes the page feel more alive. For specific resources, I'd search 'check if image is visible' (with or without jQuery). You'll probably find some plugins or some code that might show how to do this. Feel free to approach me if you can't work it out.