Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/callumacrae/whtevr
:information_desk_person: The lazy loading library that just doesn't care.
https://github.com/callumacrae/whtevr
Last synced: 2 months ago
JSON representation
:information_desk_person: The lazy loading library that just doesn't care.
- Host: GitHub
- URL: https://github.com/callumacrae/whtevr
- Owner: callumacrae
- Created: 2015-03-24T19:45:29.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2016-02-25T16:38:17.000Z (almost 9 years ago)
- Last Synced: 2024-10-11T00:10:39.836Z (3 months ago)
- Language: JavaScript
- Homepage:
- Size: 36.1 KB
- Stars: 6
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# whtevr [](https://travis-ci.org/callumacrae/whtevr)
> The lazy loading library that just doesn't care.
whtevr is a lazy loading library that can lazily load anything. I designed it
so that I could use it with srcset and picturefill. You can probably put other
stuff like videos in it, too. Whatever. I don't care. Neither does this
library.
It relies on jQuery and another library of mine, [when-scroll].
## Installation
```
$ npm install --save whtevr
```
## Usage
Put everything in a noscript tag with the class "js-whtevr":
```html
```
It will load the contents of the script tag when it is 300px away from the
bottom of the screen.
You can also use it to defer the loading of stuff until after the page has
loaded, using the `data-load-after` attribute. It doesn't matter where it is:
if you specify this attribute, it will be loaded after that amount of time.
An event will be fired when it is loaded:
```js
$('.js-whtevr').on('whtevr-loaded', function (e, $el) {
picturefill({
elements: $el.toArray()
});
});
```
An additional event will be fired when the images contained are all loaded:
```js
$('.js-gallery').on('whtevr-images-loaded', function (e, $el) {
initGallery($el);
});
```
### jQuery plugin
The library also includes a jQuery plugin that you can use to immediately
load the contents of a whtevr element:
```js
$('.js-whtevr').whtevrLoad();
```
### legacy
Prior to 0.2 (and this still works), you had to use a script tag:
> Put everything in a script tag with the type "text/x-whtevr":
>
> ```html
>
> <img src="..." srcset="...">
>
> ```
>
> It will load the contents of the script tag when it is 300px away from the
> bottom of the screen.
>
> You can also use it to defer the loading of stuff until after the page has
> loaded, using the `data-load-after` attribute. It doesn't matter where it is:
> if you specify this attribute, it will be loaded after that amount of time.
>
> An event will be fired when it is loaded:
>
> ```js
> $('[type="text/x-whtevr"]').on('whtevr-loaded', function (e, $el) {
> picturefill({
> elements: $el.toArray()
> });
> });
> ```
As of 0.2, you can use noscript tags to lazy load stuff. It works without
JavaScript, and it means your editor will syntax highlight the contents.
## License
Released under the MIT license.
[mocha-phantomjs issue]: https://github.com/metaskills/mocha-phantomjs/issues/168
[when-scroll]: https://github.com/callumacrae/when-scroll