Lazy Loaded Images

[crolla97]

Hey @jedrzejchalubek I've added lazy image loading as requested by #362

I've kept it pretty barebones in functionality as I wait to see if this is:

1. Something you even want the project to have.
2. How big in scope the lazy loading feature should be.

Initalization

The HTML syntax for lazy loading images is as follows:

<div class="glide">
  <div class="glide__track" data-glide-el="track">
    <ul class="glide__slides">
      <li class="glide__slide"><img class='glide__lazy' data-src="IMAGE_URL"></li>
      <li class="glide__slide"><img class='glide__lazy' data-src="IMAGE_URL"></li>
      <li class="glide__slide"><img class='glide__lazy' data-src="IMAGE_URL"></li>
    </ul>
  </div>
</div>

To initialize lazy loading the default lazy must be set to true, by default it is false.

new Glide('#glide', { lazy: true }).mount()

---

Additional defaults

• lazyInitialSlidesLoaded
  Defines the initial amount of slides to be loaded

• lazyScrollThreshold
  Defines the threshold in which lazy loading will begin. For example, a threshold of 1.2 will load the images if the carousel/slider is within 120% of the screen width and height

Let me know what you think, happy to amend PR further if necessary.

[mooror]

Any chance this could be merged into the core? This still seems like a vital setting for image sliders

[ericmorand]

Glide is not an image slider. It is a slider.

How would the "lazy" loading work with anything that is not an image? Like a div, a paragraph, another glide slider...how would glide know what to do to "lazy load" the thing?