https://github.com/eduardo-matos/lazier

Dojo lazyload module that also works with media queries (when supported by the browser).
https://github.com/eduardo-matos/lazier

Last synced: about 1 month ago
JSON representation

Dojo lazyload module that also works with media queries (when supported by the browser).

• Host: GitHub
• URL: https://github.com/eduardo-matos/lazier
• Owner: eduardo-matos
• License: mit
• Created: 2013-12-17T10:16:36.000Z (almost 11 years ago)
• Default Branch: master
• Last Pushed: 2013-12-21T11:57:15.000Z (almost 11 years ago)
• Last Synced: 2024-10-10T13:30:02.728Z (about 1 month ago)
• Language: JavaScript
• Size: 129 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Lazier

[Dojo](http://dojotoolkit.org/) lazyload module that also works with media queries (when supported by the browser). You'll never need to load a big image on mobile ever again!

### Getting Started

The HTML:

```html









```

The JavaScript:

```javascript

require(['lazier/lazyload', 'dojo/dom', 'dojo/query'], function (lazyload, dom, query) {

    // Apply directly to a dom node

    lazyload(dom.byId('lazy'));

    // Apply to a nodelist

    lazyload(query('.lazy'));

    // Apply directly from a nodelist

    query('.lazy').lazyload();

});

```

Destroying lazyload. It'll prevent the images from being loaded.

```javascript

require(['lazier/lazyload', 'dojo/query'], function (lazyload, query) {

    var handle = query('.lazy').lazyload();

    // ...

    handle.destroy();

});

```

Loading images before you reach them.

```javascript

require(['lazier/lazyload', 'dojo/query'], function (lazyload, query) {

    query('.lazy').lazyload({

        threshold: 200

    });

});

```

You can also use you own effects when loading the images. It's a function that receives the dom being loaded as the `this` variable, and should return any object with a play function (which will be executed when then dom is loaded).

```javascript

require(['lazier/lazyload', 'dojo/query', 'lazier/effects/fade', 'dojo/fx'], function (lazyload, query, fade, fx) {

    // Builtin lazier effect

    query('.lazy').lazyload({

        fx: fade

    });

    // Dojo effect

    query('.lazy').lazyload({

        fx: function () {

            return fx.wipeIn({

                node: this,

                duration: 300

            })

        }

    });

    // Custom effect

    query('.lazy').lazyload({

        fx: function () {

            var node = this;

            // loading image...

            node.style.opacity = 0;

            return {

                // image loaded!

                play: function () {

                    node.style.opacity = 0.5;

                }

            }

        }

    });

});

```

#### Options

**threshold _(int)_**: Load images before you reach them. It's an integer number of pixels.

**srcAttr _(string)_**: Name of the attribute that will hold the original image address.

**mediaAttr _(string)_**: Name of the attribute that will hold the media query to decide if the image have to be loaded.

**fx _(function)_**: Function that receives the node that is being loaded (as the `this` variable). This function must have a `play` property which must also be a function that is executed right after the image is loaded.

### Tests

First create a webserver. You might use python (`python -m SimpleHttpServer 8080`) or PHP (`php -S localhost:8080`). Then head to `http://localhost:8080/test/SpecRunnerJasmine.html`.

### Contributing

Feel free to open an issue to mention any bug or sugest an improvement. You're more than welcome to send me pull request fixing any bugs or adding unit tests =)