mirror of
https://github.com/sbrl/SnoozeSquad.git
synced 2018-01-10 21:33:44 +00:00
Initial git repo setup.
This commit is contained in:
parent
fba1f6f2ba
commit
f6e1e201dd
5 changed files with 150 additions and 1 deletions
7
HeaderComment.js
Normal file
7
HeaderComment.js
Normal file
|
@ -0,0 +1,7 @@
|
||||||
|
/******************************************************************************
|
||||||
|
******************************* SnoozeSquad.js *******************************
|
||||||
|
******************************************** v0.1 ** by Starbeamrainbowlabs **
|
||||||
|
* From https://github.com/sbrl/SnoozeSquad/
|
||||||
|
* Licensed under the MIT license.
|
||||||
|
******************************************************************************/
|
||||||
|
|
19
Makefile
Normal file
19
Makefile
Normal file
|
@ -0,0 +1,19 @@
|
||||||
|
### SnoozeSquad Makefile ###
|
||||||
|
TargetFile = SnoozeSquad.min.js
|
||||||
|
|
||||||
|
# Set the default make goal
|
||||||
|
.DEFAULT_GOAL = build
|
||||||
|
|
||||||
|
# Installs the neccesary dependencies to begin development.
|
||||||
|
# Currently linux only, but it's so simple you should be able to figure windows
|
||||||
|
# out easily.
|
||||||
|
setup:
|
||||||
|
@echo [SnoozeSquad/Setup] Installing UglifyJS \(Harmony\)
|
||||||
|
sudo npm install uglify-js-harmony --global
|
||||||
|
|
||||||
|
# The default make target. This minifies SnoozeSquad.js to SnoozeSquad.min.js.
|
||||||
|
build:
|
||||||
|
cat HeaderComment.js >$(TargetFile)
|
||||||
|
uglifyjs SnoozeSquad.js --mangle --compress --screw-ie8 >>$(TargetFile)
|
||||||
|
@echo [SnoozeSquad/Build] Minified Snooze Squad to $(TargetFile)
|
||||||
|
@echo '*** Build Complete ***'
|
45
README.md
45
README.md
|
@ -1,2 +1,45 @@
|
||||||
# SnoozeSquad
|
# SnoozeSquad
|
||||||
Finally a simple ES6 lazy image loader.
|
Finally a simple lazy image loader. Written in ES6.
|
||||||
|
|
||||||
|
## Downloading
|
||||||
|
Download SnoozeSquad from this repo. Links:
|
||||||
|
|
||||||
|
Version | Link | curl command
|
||||||
|
------------|-----------------------------------|-----------------------------
|
||||||
|
Unminified | (coming soon!) | (coming soon!)
|
||||||
|
Minified | (coming soon!) | (coming soon!)
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
Using Snooze Squad is really easy. Here's a simple example:
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
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:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!-- 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.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## License
|
||||||
|
Snooze Squad is licensed under the MIT license. See the [LICENSE](https://github.com/sbrl/SnoozeSquad/blob/master/LICENSE) file in this repository.
|
||||||
|
|
72
SnoozeSquad.js
Normal file
72
SnoozeSquad.js
Normal file
|
@ -0,0 +1,72 @@
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
class SnoozeSquad
|
||||||
|
{
|
||||||
|
constructor(options)
|
||||||
|
{
|
||||||
|
this.range = 1;
|
||||||
|
this.attributeName = "data-src";
|
||||||
|
this.updateInterval = 250;
|
||||||
|
|
||||||
|
for (let optionKey in options)
|
||||||
|
this[optionKey] = options[optionKey];
|
||||||
|
|
||||||
|
this.querySelector = `[${this.attributeName}]`;
|
||||||
|
this.lastUpdateTime = 0;
|
||||||
|
this.start();
|
||||||
|
}
|
||||||
|
|
||||||
|
start()
|
||||||
|
{
|
||||||
|
window.addEventListener("scroll", (function(event) {
|
||||||
|
if((+new Date()) - this.lastUpdateTime > this.updateInterval)
|
||||||
|
this.update();
|
||||||
|
}).bind(this));
|
||||||
|
}
|
||||||
|
|
||||||
|
update()
|
||||||
|
{
|
||||||
|
this.lastUpdateTime = +new Date();
|
||||||
|
//console.log("Updating");
|
||||||
|
var snoozingElements = this.getSnoozingElements();
|
||||||
|
for (let element of snoozingElements)
|
||||||
|
{
|
||||||
|
if(this.isElementInRange(element))
|
||||||
|
this.wakeUpElement(element);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
getSnoozingElements()
|
||||||
|
{
|
||||||
|
return document.querySelectorAll(this.querySelector);
|
||||||
|
}
|
||||||
|
|
||||||
|
isElementInRange(element)
|
||||||
|
{
|
||||||
|
var bounds = element.getBoundingClientRect(),
|
||||||
|
range = this.range * window.innerHeight;
|
||||||
|
|
||||||
|
if(bounds.bottom > -range && bounds.top < window.innerHeight + range &&
|
||||||
|
bounds.right > -range && bounds.left < window.innerWidth + range)
|
||||||
|
{
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
wakeUpElement(element)
|
||||||
|
{
|
||||||
|
var attr = this.attributeName.replace("data-", "");
|
||||||
|
if(element.dataset.hasOwnProperty(attr))
|
||||||
|
{
|
||||||
|
//console.info("Woke up element", element);
|
||||||
|
element.src = element.dataset[attr];
|
||||||
|
}
|
||||||
|
else
|
||||||
|
{
|
||||||
|
//console.warn(`Failed to wake up element (no ${attr} attribute present)`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
8
SnoozeSquad.min.js
vendored
Normal file
8
SnoozeSquad.min.js
vendored
Normal file
|
@ -0,0 +1,8 @@
|
||||||
|
/******************************************************************************
|
||||||
|
******************************* SnoozeSquad.js *******************************
|
||||||
|
******************************************** v0.1 ** by Starbeamrainbowlabs **
|
||||||
|
* From https://github.com/sbrl/SnoozeSquad/
|
||||||
|
* Licensed under the MIT license.
|
||||||
|
******************************************************************************/
|
||||||
|
|
||||||
|
"use strict";class SnoozeSquad{constructor(t){this.range=1;this.attributeName="data-src";this.updateInterval=250;for(let e in t)this[e]=t[e];this.querySelector=`[${this.attributeName}]`;this.lastUpdateTime=0;this.start()}start(){window.addEventListener("scroll",function(t){if(+new Date-this.lastUpdateTime>this.updateInterval)this.update()}.bind(this))}update(){this.lastUpdateTime=+new Date;var t=this.getSnoozingElements();for(let e of t){if(this.isElementInRange(e))this.wakeUpElement(e)}}getSnoozingElements(){return document.querySelectorAll(this.querySelector)}isElementInRange(t){var e=t.getBoundingClientRect(),i=this.range*window.innerHeight;if(e.bottom>-i&&e.top<window.innerHeight+i&&e.right>-i&&e.left<window.innerWidth+i){return true}return false}wakeUpElement(t){var e=this.attributeName.replace("data-","");if(t.dataset.hasOwnProperty(e)){t.src=t.dataset[e]}else{}}}
|
Loading…
Reference in a new issue