Fancyapps
Return to top
On this page

Lazy Load

With lots of images, the non-lazy loading makes the carousel trigger lots of image downloads which sometimes makes browsers unresponsive. Fortunately, lazy loading is a solution that lowers initial page payload.

Usage

Only set the src attribute for the images you want to load right away. Set an additional data-lazy-src attribute for the images you want to lazy load. Use the preload option to determine how many next/previous slides to preload.

Examples

Basic example

html
<div class="f-carousel" id="myCarousel">
  <div class="f-carousel__slide">
    <img data-lazy-src="https://lipsum.app/id/1/1200x675" />
  </div>
  <div class="f-carousel__slide">
    <img data-lazy-src="https://lipsum.app/id/2/1200x675" />
  </div>
  <div class="f-carousel__slide">
    <img data-lazy-src="https://lipsum.app/id/3/1200x675" />
  </div>
  <div class="f-carousel__slide">
    <img data-lazy-src="https://lipsum.app/id/4/1200x675" />
  </div>
  <div class="f-carousel__slide">
    <img data-lazy-src="https://lipsum.app/id/5/1200x675" />
  </div>
</div>

JSFiddle Example

Background images

Background images are also supported.

html
<div class="f-carousel" id="myCarousel">
  <div
    class="f-carousel__slide"
    data-lazy-src="https://lipsum.app/id/1/1200x675"
  >
    1
  </div>
  <div
    class="f-carousel__slide"
    data-lazy-src="https://lipsum.app/id/2/1200x675"
  >
    2
  </div>
  <div
    class="f-carousel__slide"
    data-lazy-src="https://lipsum.app/id/3/1200x675"
  >
    3
  </div>
  <div
    class="f-carousel__slide"
    data-lazy-src="https://lipsum.app/id/4/1200x675"
  >
    4
  </div>
  <div
    class="f-carousel__slide"
    data-lazy-src="https://lipsum.app/id/5/1200x675"
  >
    5
  </div>
</div>
1
2
3
4
5

JSFiddle Example