1
0
Fork 0
mirror of https://github.com/sbrl/SnoozeSquad.git synced 2018-01-10 21:33:44 +00:00
A ridiculously simple lazy image loader, written in ES6. Time for a nap I think... This is a read-only backup mirror of the main Github repository. https://github.com/sbrl/SnoozeSquad
Find a file
2016-05-28 17:05:22 +01:00
HeaderComment.js Initial git repo setup. 2016-05-28 16:51:39 +01:00
LICENSE Initial commit 2016-05-28 16:20:01 +01:00
Makefile Initial git repo setup. 2016-05-28 16:51:39 +01:00
README.md Put attributes in code blocks in README. 2016-05-28 17:05:22 +01:00
SnoozeSquad.js Initial git repo setup. 2016-05-28 16:51:39 +01:00
SnoozeSquad.min.js Initial git repo setup. 2016-05-28 16:51:39 +01:00

SnoozeSquad

Finally a simple lazy image loader. Written in ES6.

Downloading

Download SnoozeSquad from this repo. Links:

Makefile curl command
SnoozeSquad.js curl -OL https://github.com/sbrl/SnoozeSquad/raw/master/SnoozeSquad.js
SnoozeSquad.min.js curl -OL https://github.com/sbrl/SnoozeSquad/raw/master/SnoozeSquad.min.js

Usage

Using Snooze Squad is really easy. Here's a simple example:

window.snoozeSquad = new SnoozeSquad({});

The first parameter in the above is the options object. You can specify a number of options that are listed below if you want to. Note that the options object is currently required, and SnoozeSquad won't work without it.

Once you've got that set up, change the name of the src attribute of all images that you want to be lazy loaded to data-src. The contents of data-src will be copied over to the src attirbute when the image is woken up. Example:

<!-- From this -->
<img src="/path/to/some/image.js" />

<!-- To this -->
<img data-src="/path/to/some/image.js" />

Note that no other attributes will be touched, so you can safely do whatever else you want to your images.

If for some reason the data-src attribute is unsuitable, you change change it with the attributeName parameter (see below).

Options

You can pass Snooze Squad a number of options. Below is an explanation of each:

  • range - The number of screens within the current screen an image is allowed to get before it is woken up.
  • attributeName - The name of the attribute that we should copy over to wake image up.
  • updateInterval - The maximum interval at which we should update. Helps to prevent lag.

Development

Snooze Squad development isn't too complicated either. You'll need [Node.js] and make installed if you want to build / minify Snooze Squad.

Note that if you submit pull requests, it would be helpful if you didn't minify the file yourself if there's alreayd a pull request waiting. That just gets messy.

Setup

If you're on linux, just run make setup in the current directory. If not (or you're on a machine without sudo - how odd!), just run npm install uglify-js-harmony --global instead.

Minification

Just run make in the current directory.

License

Snooze Squad is licensed under the MIT license. See the LICENSE file in this repository.