0

I have a lot of images loading for Isotope and I was wondering if there's a way for isotope to not load images unless they are on screen? I'm fine if the images take up the appropriate amount of space as I provide the width and height of all the images but I'm wondering if there is a way for the images to not load unless they are needed?

rotaercz
  • 3,174
  • 7
  • 45
  • 80

1 Answers1

1

Without knowing what requirements you might have I'd suggest combining Lazy Load with Isotope.

Here's a detailed explanation of how to integrate the two scripts.

If you need more help, please post a fiddle with your code.

Community
  • 1
  • 1
Pixelsmith
  • 162
  • 1
  • 11
  • Ah, interesting. Thank you for the suggestion. I'll definitely check it out. – rotaercz Mar 20 '15 at 02:23
  • Here is a codepen with a more modern lazyloader: http://codepen.io/aFarkas/pen/VYGvde – alexander farkas Mar 20 '15 at 13:39
  • @alexanderfarkas: Than you for the link! Is it faster? Is it a more updated version of Lazy Load? – rotaercz Mar 20 '15 at 16:27
  • 1
    Compared to $.lazyload it is much much faster (runtime and network). But there are many other improvements: it detects any visibility changes automatically (no need to trigger fake a scroll event). It also detects new images automatically.Both auto-initialization and auto-detect works with any Framework. It supports native responsive images markup . It can be added to the head and already starts to download inview images while the page isn't fully parsed (big perf advantage. Note it has no dependencies to other scripts.) It does not hide images from googlebot. Is simply extendable.and so on... – alexander farkas Mar 20 '15 at 16:41
  • 1
    @alexanderfarkas I figured out what the library was in your codepen but why not actually mention it and give a link to it on github in your comment? BTW for everyone not wanting to search in the codepen: , here it is [lazysizes](https://github.com/aFarkas/lazysizes) – Macsupport Mar 21 '15 at 05:52