Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

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

About

Images/iFrames/DOM lazyload meant to make your life easier

Resources

License

Packages

No packages published