diff --git a/HeaderComment.js b/HeaderComment.js new file mode 100644 index 0000000..dec2429 --- /dev/null +++ b/HeaderComment.js @@ -0,0 +1,7 @@ +/****************************************************************************** + ******************************* SnoozeSquad.js ******************************* + ******************************************** v0.1 ** by Starbeamrainbowlabs ** + * From https://github.com/sbrl/SnoozeSquad/ + * Licensed under the MIT license. + ******************************************************************************/ + diff --git a/Makefile b/Makefile new file mode 100644 index 0000000..9aa210e --- /dev/null +++ b/Makefile @@ -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 ***' diff --git a/README.md b/README.md index 06e066f..a808ee9 100644 --- a/README.md +++ b/README.md @@ -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 + + + + + +``` + +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. diff --git a/SnoozeSquad.js b/SnoozeSquad.js new file mode 100644 index 0000000..90501ba --- /dev/null +++ b/SnoozeSquad.js @@ -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)`); + } + } +} + diff --git a/SnoozeSquad.min.js b/SnoozeSquad.min.js new file mode 100644 index 0000000..c9b4c7d --- /dev/null +++ b/SnoozeSquad.min.js @@ -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-i&&e.left