Lazy Load

Lazy Load delays loading of images on page while they are outside of viewport until user scrolls to them.

It will make the page load faster, improve scrolling performance and also save traffic.

Note, that lazy images and elements should be inside of scrollable to work correctly

To use lazy load on images:

1. specify image source into data-src attribute instead of src attribute
2. add lazy class to the image

After lazy image successfully loaded, or in case of error loading the image file, the lazy class will be replaced with lazy-loaded class.

It is also possible to use lazy load for background images, in this case:

1. add lazy class to element

<div class="page-content">
  ...
  <div data-background="path/to/image.jpg" class="lazy">
      ...
  ...
</div>

If you want to add fade-in effect when image is loaded, you need to add additional lazy-fade-in class to image/element:

Lazy Load App Parameters

It is possible to control some default lazy loading behavior using global by passing lazy loading related parameters under lazy parameter:

For example:

var app = new Framework7({
  lazy: {
    threshold: 50,
    sequential: false,
  },

If you add lazy load images manually after page initialization (e.g. after Ajax request) then Lazy Load won’t be initialized automatically and won’t work as expected. In this case you need to init it manually using the following method:

app.lazy.create(pageEl) - initialize lazy loading on page

• pageEl - HTMLElement or string (with CSS Selector) of page which contains lazy load images. Required.

And if you want to destroy/disable it later:

• pageEl - HTMLElement or string (with CSS Selector) of page which contains lazy load images. Required.

If you want to force any lazy image/element to load you may use the following method:

app.lazy.loadImage(imageEl, callback) - force to load lazy image

• imageEl - HTMLElement or string (with CSS Selector) of lazy image or element (element with lazy class). Required.
• callback - function - callback function that will be executed when image file loaded or in case of error loading this file.

Lazy Load Events

Lazy load will fire the following DOM events on lazy element and events on app instance:

Lazy load emits events on app instance as well.

It is possible to force lazy handler to check lazy images by triggering lazy event on lazy image/element. It is useful in case you have added lazy elements dynamically and want to check should them be loaded or not without scrolling the page. For example:

Examples

img.demo-lazy {
  width: 100%;
  height: auto;
  display: block;
}
div.demo-lazy {
  background: #aaa;
  background-size: cover;
  height: 60vw;

← Inputs / Form Inputs