Lazy Frontstart

Lazy loader for (responsive) images, background images and other elements with a source attribute.

Download Lazy Frontstart

Latest version (stable)

Develop (experimental)

Compatibility

Compatibility Frontstart 1.0.0 or higher
Required Frontstart components None
Dependencies None

Usage

Lazy load elements with a source attribe and also background images when they become visible in the viewport.

Situation for IMG element Attached class
Never loaded IMG element .not-loaded
Loaded IMG element width .loaded .load-happened
Not loaded IMG element, but load happened before .load-happened .not-loaded
Situation for any elements Attached class
Never in view .not-in-view
In view .in-view .in-view-happened
Not in view, but in view happened before .in-view-happened .not-in-view

<!-- Lazy load source when device is small -->
<img data-lazy data-src-small="http://placehold.it/80x80" />

<!-- Lazy load sources only when element is in view (see example below) -->
<img data-lazy="load"
  data-src-small="http://placehold.it/80x80"
  data-src-small-hdpi="http://placehold.it/160x160"
  data-src-medium="http://placehold.it/100x100"
  data-src-medium-hdpi="http://placehold.it/200x200"
  data-src-large="http://placehold.it/120x120"
  data-src-large-hdpi="http://placehold.it/240x240" />

<!-- Lazy load default or small device source only when element is in view -->
<img alt="Sample image" data-lazy="load"
  data-src="http://placehold.it/80x80"
  data-src-small="http://placehold.it/40x40" />

<!-- Show only when element is in view -->
<div data-lazy>Show only when DIV is in view</div>

<!-- Show only when element is in view and lazy load background image (see example below) -->
<div data-lazy
  data-bg="http://placehold.it/80x80"
  data-bg-large="http://placehold.it/16x160">
  Element with lazy background image
</div>
                    

Load, scroll or resize to see the image below being lazy.

Sample image

Initialize

The lazy loader will initialize itself automatically. If you want to initialize again (e.g. when DOM is updated) call the function Fs.lazy.initialize();.

Load, scroll or resize to see the image below being lazy.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Customization

Style

In _lazy.scss are examples of how to style the classes. (Sass file not availabe in compiled version)

Change offset

In lazy.js you can change the variable inViewOffsetPx to adjust the "in view" offset.