1
0
Fork 0
Browse Source

Initial git repo setup.

master
Starbeamrainbowlabs 6 years ago
parent
commit
f6e1e201dd
  1. 7
      HeaderComment.js
  2. 19
      Makefile
  3. 45
      README.md
  4. 72
      SnoozeSquad.js
  5. 8
      SnoozeSquad.min.js

7
HeaderComment.js

@ -0,0 +1,7 @@ @@ -0,0 +1,7 @@
/******************************************************************************
******************************* SnoozeSquad.js *******************************
******************************************** v0.1 ** by Starbeamrainbowlabs **
* From https://github.com/sbrl/SnoozeSquad/
* Licensed under the MIT license.
******************************************************************************/

19
Makefile

@ -0,0 +1,19 @@ @@ -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

@ -1,2 +1,45 @@ @@ -1,2 +1,45 @@
# 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

@ -0,0 +1,72 @@ @@ -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

@ -0,0 +1,8 @@ @@ -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…
Cancel
Save