Skip to content
Images/iFrames/DOM lazyload meant to make your life easier
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
examples
test
.gitattributes
.gitignore
.travis.yml
.zuul.yml
LICENSE
README.md
b.gif
bower.json
lazyload.js
package.json

README.md

README not finished

Install

npm install lazyloadjs --save

Also available for <script> users:

  • ....

Simple example

See more examples.

<!DOCTYPE html>
<html>
  <head>
    <title>lazyload</title>
  </head>
  <body>
    <script src="lazyload.min.js"></script>

    <!-- A lot of content -->
    <!-- A lot of content -->

    <img
      data-src="real/image/src.jpg"
      src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
      onload="lzld(this)">
  </body>
</html>

Make sure your webpage is in standards mode.

Viewport computing is badly handled by browsers when in quirksmode.

If you do not want to use a data-uri as your src, you can also use the provided b.gif which is the tiniest gif ever.

On most websites, you better let the first top images not bound to lzld method. So that they shows really fast.

Advanced example

lazyloadjs is an npm module and is compatible with browserify.

global.myLazyload = require('lazyloadjs')();
<img
  data-src="real/image/src.jpg"
  src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
  onload="myLazyload(this)">

Per default, lazyloadjs exposes the lzld instance on the global object. So that in most cases, you just need to require it in your webpage.

API

var lzld = lazyload([opts])

opts is an object with these defaults:

{
  container: document.body,
  offset: 333,
  src: 'data-src' // or function(elt) { return customSrc }
}

opts.container is the referencing container, it's the viewport, defaults to document.body

opts.offset is a length in pixels used to compute when an element will soon be visible. So that you load it just before it becomes visible.

src is the attribute name storing the real src of the element to load.

src can also be a function, so that you can have your custom src computing algorithm. You can use it to lazyload High DPI/retina images.

Launching the examples

npm run examples

Developing

Launch the dev server:

npm run dev

Browse to http://localhost:8080/__zuul.

Tests are written with mocha.

Building

We provide a pre-built version of lazyloadjs in build/lazyload.min.js.

But you can build your own:

npm run build

You get the build in build/lazyload.min.js.

Please consider using browserify.

Sites using lazyload

You can’t perform that action at this time.