├── .gitignore
├── README.md
├── index.js
├── package-lock.json
└── package.json


/.gitignore:
--------------------------------------------------------------------------------
1 | demo
2 | dist
3 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # lazim
 2 | Super tiny and simple image lazy load library. **350 bytes gzipped.**
 3 | 
 4 | ## Install
 5 | ```bash
 6 | npm i lazim --save
 7 | ```
 8 | 
 9 | ## Usage
10 | `lazim` doesn't really care about your markup. This works:
11 | ```html
12 | <img data-src='/image.jpg' />
13 | ```
14 | But so does this:
15 | ```html
16 | <div data-src='/image.jpg'>
17 |   <img />
18 | </div>
19 | ```
20 | And so does this:
21 | ```html
22 | <div data-src='/image.jpg'>
23 |   <div
24 |     <img />
25 |   </div>
26 |   <h2>silly image</h2>
27 | </div>
28 | ```
29 | 
30 | ### Instantiating
31 | To run lazim, import `bind` and call it:
32 | ```javascript
33 | import { bind } from 'lazim'
34 | 
35 | bind()
36 | ```
37 | 
38 | You can also pass a different attribute, if you don't like `data-src`:
39 | ```javascript
40 | bind('data-url')
41 | ```
42 | 
43 | `lazim` checks if there are images in the viewport on initial load, but in the
44 | event you need to run this again when adding/animating elements:
45 | ```javascript
46 | import { update } from 'lazim'
47 | 
48 | update()
49 | ```
50 | 
51 | Once bound, `lazim` removes the `data-src` attribute to prevent duplicate event
52 | listeners.
53 | 
54 | ### Animation
55 | `lazim` adds a couple helper classes to the element you defined `data-src` on:
56 | 
57 | When visible in the viewport, it will receive an `is-visible` class. When the
58 | image loads, it receives an `is-loaded` class.
59 | ```html
60 | <div class='is-visible is-loaded'>
61 |   <img src='/image.jpg' />
62 | </div>
63 | ```
64 | 
65 | ### Re-binding
66 | If you're using a PJAX library like
67 | [operator](https://github.com/estrattonbailey/operator), you'll need to re-bind
68 | new images that are added to the DOM on each page load. In that case, just call
69 | `bind` again whenever the page updates:
70 | ```javascript
71 | router.on('after', () => bind())
72 | ```
73 | 
74 | ## License
75 | MIT License © [Eric Bailey](https://estrattonbailey.com)
76 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | import vsbl from 'vsbl'
 2 | 
 3 | let srrafInstance
 4 | 
 5 | export function update () {
 6 |   srrafInstance && srrafInstance.update()
 7 | }
 8 | 
 9 | export function bind (attr = 'data-src') {
10 |   let images
11 |   const nodes = document.querySelectorAll('[' + attr + ']')
12 | 
13 |   for (let i = 0; i < nodes.length; i++) {
14 |     const node = nodes[i]
15 |     const img = node.nodeName === 'IMG' ? node : node.getElementsByTagName('img')[0]
16 |     const src = node.getAttribute(attr)
17 | 
18 |     img.onload = () => {
19 |       node.classList.add('is-loaded')
20 |     }
21 | 
22 |     node.removeAttribute(attr)
23 | 
24 |     images = vsbl(node)(() => {
25 |       node.classList.add('is-visible')
26 |       img.src = src
27 |     })
28 |   }
29 | 
30 |   if (images) {
31 |     images.update()
32 |     if (!srrafInstance) srrafInstance = images
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "lazim",
 3 |   "version": "2.0.0",
 4 |   "description": "Super tiny and simple image lazy load library.",
 5 |   "source": "index.js",
 6 |   "module": "dist/lazim.es.js",
 7 |   "main": "dist/lazim.js",
 8 |   "umd:main": "dist/lazim.umd.js",
 9 |   "files": [
10 |     "dist"
11 |   ],
12 |   "scripts": {
13 |     "build": "microbundle build",
14 |     "watch": "microbundle watch --compress false",
15 |     "publish": "npm publish"
16 |   },
17 |   "repository": {
18 |     "type": "git",
19 |     "url": "git+ssh://git@github.com/estrattonbailey/lazim.git"
20 |   },
21 |   "author": "estrattonbailey",
22 |   "license": "MIT",
23 |   "bugs": {
24 |     "url": "https://github.com/estrattonbailey/lazim/issues"
25 |   },
26 |   "homepage": "https://github.com/estrattonbailey/lazim#readme",
27 |   "devDependencies": {
28 |     "microbundle": "^0.11.0"
29 |   },
30 |   "dependencies": {
31 |     "vsbl": "^1.3.3"
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------