Super tiny and simple image lazy load library.
npm install lazimbash
npm i lazim --save
`Usage
lazim doesn't really care about your markup. This works:
`html
![]()
`
But so does this:
`html
![]()
`
And so does this:
`html
![]()
silly image
$3
To run lazim, import bind and call it:
`javascript
import { bind } from 'lazim'bind()
`You can also pass a different attribute, if you don't like
data-src:
`javascript
bind('data-url')
`lazim checks if there are images in the viewport on initial load, but in the
event you need to run this again when adding/animating elements:
`javascript
import { update } from 'lazim'update()
`Once bound,
lazim removes the data-src attribute to prevent duplicate event
listeners.$3
lazim adds a couple helper classes to the element you defined data-src on:When visible in the viewport, it will receive an
is-visible class. When the
image loads, it receives an is-loaded class.
`html

`$3
If you're using a PJAX library like
operator, you'll need to re-bind
new images that are added to the DOM on each page load. In that case, just call
bind again whenever the page updates:
`javascript
router.on('after', () => bind())
``