New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

shimmer-lazyload

Package Overview
Dependencies
Maintainers
1
Versions
2
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

shimmer-lazyload - npm Package Compare versions

Comparing version

4.0.0
to
4.0.1

examples/custom-loader.html
examples/mulit-lazyload.html

30

dist/lazyload.js

@@ -442,6 +442,6 @@ (function webpackUniversalModuleDefinition(root, factory) {

var lazyAttrs = ['data-src'];
var replacedGetAttribute = [];
function lazyload(opt) {
var lazyAttrs = ['data-src'];
var opts = Object.assign({

@@ -464,2 +464,6 @@ 'offset': 200,

function show(elt) {
if (elt.getAttribute('data-lzled')) {
return;
}
var src = findRealSrc(elt);

@@ -488,4 +492,11 @@

function register(elt) {
// unsubscribe onload
if (elt instanceof Array || elt instanceof NodeList || elt instanceof HTMLCollection) {
Array.prototype.forEach.call(elt, function (e) {
return register(e);
});
return;
} // unsubscribe onload
// needed by IE < 9, otherwise we get another onload when changing the src
elt.onload = null;

@@ -499,3 +510,6 @@ elt.removeAttribute('onload'); // https://github.com/vvo/lazyload/issues/62

(0, _inViewport.default)(elt, opts, show);
replaceGetAttribute(elt);
if (opts.replaceGetAttribute) {
replaceGetAttribute(elt);
}
}

@@ -508,11 +522,11 @@ }

function replaceGetAttribute(elt) {
var elementName = elt.__proto__;
var elementPrototype = elt.__proto__;
if (replacedGetAttribute.indexOf(elementName) !== -1) {
if (replacedGetAttribute.indexOf(elementPrototype) !== -1) {
return;
}
var original = elementName.getAttribute;
var original = elementPrototype.getAttribute;
elementName.getAttribute = function (name) {
elementPrototype.getAttribute = function (name) {
if (name === 'src') {

@@ -536,2 +550,4 @@ var realSrc;

};
replacedGetAttribute.push(elementPrototype);
}

@@ -538,0 +554,0 @@

2

dist/lazyload.min.js

@@ -1,1 +0,1 @@

!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("lazyload",[],e):"object"==typeof exports?exports.lazyload=e():t.lazyload=e()}("undefined"!=typeof self?self:this,function(){return function(t){var e={};function n(r){if(e[r])return e[r].exports;var o=e[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)n.d(r,o,function(e){return t[e]}.bind(null,o));return r},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=0)}([function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default=void 0;var r,o=(r=n(1))&&r.__esModule?r:{default:r};var i=["data-src"],u=[];var c=function(t){var e=Object.assign({offset:200,src:"data-src",container:!1,loader:null,replaceGetAttribute:!1},t||{});"string"==typeof e.src&&-1===i.indexOf(e.src)&&i.push(e.src);var n=[];function r(t){var r=function(t){return"function"==typeof e.src?e.src(t):t.getAttribute(e.src)}(t);r&&(e.loader?e.loader(t,r):t.src=r),t.setAttribute("data-lzled",!0),n[n.indexOf(t)]=null}return function(t){t.onload=null,t.removeAttribute("onload"),t.onerror=null,t.removeAttribute("onerror"),-1===n.indexOf(t)&&((0,o.default)(t,e,r),function(t){var e=t.__proto__;if(-1===u.indexOf(e)){var n=e.getAttribute;e.getAttribute=function(t){if("src"===t){for(var e,r=0,o=i.length;r<o&&!(e=n.call(this,i[r]));r++);return e||n.call(this,t)}return n.call(this,t)}}}(t))}};e.default=c,t.exports=e.default},function(t,e,n){(function(e){t.exports=function(t,u,c){var f={container:e.document.body,offset:0,debounce:15,failsafe:150};void 0!==u&&"function"!=typeof u||(c=u,u={});var a=f.container=u.container||f.container,l=f.offset=u.offset||f.offset,d=f.debounce=u.debounce||f.debounce,s=f.failsafe=u.failsafe||f.failsafe;!0===s?s=150:!1===s&&(s=0);s>0&&s<d&&(s=d+50);for(var p=0;p<n.length;p++)if(n[p].container===a&&n[p]._debounce===d&&n[p]._failsafe===s)return n[p].isInViewport(t,l,c);return n[n.push(function(t,n,u){var c=function(){var t=[];function e(e){for(var n=t.length-1;n>=0;n--)if(t[n][0]===e)return n;return-1}function n(t){return-1!==e(t)}return{add:function(e,r,o){n(e)||t.push([e,r,o])},remove:function(n){var r=e(n);-1!==r&&t.splice(r,1)},isWatched:n,checkAll:function(e){return function(){for(var n=t.length-1;n>=0;n--)e.apply(this,t[n])}}}}(),f=t===e.document.body?e:t,a=(l=c.checkAll(function(t,e,n){v(t,e)&&(c.remove(t),n(t))}),d=n,function(){var t=this,e=arguments,n=s&&!p;clearTimeout(p),p=setTimeout(function(){p=null,s||l.apply(t,e)},d),n&&l.apply(t,e)});var l,d,s,p;o(f,"scroll",a),f===e&&o(e,"resize",a);r&&function(t,e,n){var r=new MutationObserver(function(t){!0===t.some(u)&&setTimeout(n,0)}),o=Array.prototype.filter,i=Array.prototype.concat;function u(e){var n=i.call([],Array.prototype.slice.call(e.addedNodes),e.target);return o.call(n,t.isWatched).length>0}r.observe(e,{childList:!0,subtree:!0,attributes:!0})}(c,t,a);u>0&&setInterval(a,u);function v(n,r){if(!n)return!1;if(!i(e.document.documentElement,n)||!i(e.document.documentElement,t))return!1;if(!n.offsetWidth||!n.offsetHeight)return!1;var o=n.getBoundingClientRect(),u={};if(t===e.document.body)u={top:-r,left:-r,right:e.document.documentElement.clientWidth+r,bottom:e.document.documentElement.clientHeight+r};else{var c=t.getBoundingClientRect();u={top:c.top-r,left:c.left-r,right:c.right+r,bottom:c.bottom+r}}var f=o.right>=u.left&&o.left<=u.right&&o.bottom>=u.top&&o.top<=u.bottom;return f}return{container:t,isInViewport:function(t,e,n){if(!n)return v(t,e);var r=function(t,e,n){return{watch:function(){c.add(t,e,n)},dispose:function(){c.remove(t)}}}(t,e,n);return r.watch(),r},_debounce:n,_failsafe:u}}(a,d,s))-1].isInViewport(t,l,c)};var n=[],r="function"==typeof e.MutationObserver;function o(t,e,n){t.attachEvent?t.attachEvent("on"+e,n):t.addEventListener(e,n,!1)}var i=function(){return!e.document||(e.document.documentElement.compareDocumentPosition?function(t,e){return!!(16&t.compareDocumentPosition(e))}:e.document.documentElement.contains?function(t,e){return t!==e&&!!t.contains&&t.contains(e)}:function(t,e){for(;e=e.parentNode;)if(e===t)return!0;return!1})}}).call(this,n(2))},function(t,e){var n;n=function(){return this}();try{n=n||new Function("return this")()}catch(t){"object"==typeof window&&(n=window)}t.exports=n}])});
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define("lazyload",[],e):"object"==typeof exports?exports.lazyload=e():t.lazyload=e()}("undefined"!=typeof self?self:this,function(){return function(t){var e={};function n(r){if(e[r])return e[r].exports;var o=e[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)n.d(r,o,function(e){return t[e]}.bind(null,o));return r},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=0)}([function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default=void 0;var r,o=(r=n(1))&&r.__esModule?r:{default:r};var i=[];function u(t){var e=t.__proto__;if(-1===i.indexOf(e)){var n=e.getAttribute;e.getAttribute=function(t){if("src"===t){for(var e,r=0,o=lazyAttrs.length;r<o&&!(e=n.call(this,lazyAttrs[r]));r++);return e||n.call(this,t)}return n.call(this,t)},i.push(e)}}var c=function(t){var e=["data-src"],n=Object.assign({offset:200,src:"data-src",container:!1,loader:null,replaceGetAttribute:!1},t||{});"string"==typeof n.src&&-1===e.indexOf(n.src)&&e.push(n.src);var r=[];function i(t){if(!t.getAttribute("data-lzled")){var e=function(t){return"function"==typeof n.src?n.src(t):t.getAttribute(n.src)}(t);e&&(n.loader?n.loader(t,e):t.src=e),t.setAttribute("data-lzled",!0),r[r.indexOf(t)]=null}}return function t(e){e instanceof Array||e instanceof NodeList||e instanceof HTMLCollection?Array.prototype.forEach.call(e,function(e){return t(e)}):(e.onload=null,e.removeAttribute("onload"),e.onerror=null,e.removeAttribute("onerror"),-1===r.indexOf(e)&&((0,o.default)(e,n,i),n.replaceGetAttribute&&u(e)))}};e.default=c,t.exports=e.default},function(t,e,n){(function(e){t.exports=function(t,u,c){var f={container:e.document.body,offset:0,debounce:15,failsafe:150};void 0!==u&&"function"!=typeof u||(c=u,u={});var a=f.container=u.container||f.container,l=f.offset=u.offset||f.offset,s=f.debounce=u.debounce||f.debounce,d=f.failsafe=u.failsafe||f.failsafe;!0===d?d=150:!1===d&&(d=0);d>0&&d<s&&(d=s+50);for(var p=0;p<n.length;p++)if(n[p].container===a&&n[p]._debounce===s&&n[p]._failsafe===d)return n[p].isInViewport(t,l,c);return n[n.push(function(t,n,u){var c=function(){var t=[];function e(e){for(var n=t.length-1;n>=0;n--)if(t[n][0]===e)return n;return-1}function n(t){return-1!==e(t)}return{add:function(e,r,o){n(e)||t.push([e,r,o])},remove:function(n){var r=e(n);-1!==r&&t.splice(r,1)},isWatched:n,checkAll:function(e){return function(){for(var n=t.length-1;n>=0;n--)e.apply(this,t[n])}}}}(),f=t===e.document.body?e:t,a=(l=c.checkAll(function(t,e,n){v(t,e)&&(c.remove(t),n(t))}),s=n,function(){var t=this,e=arguments,n=d&&!p;clearTimeout(p),p=setTimeout(function(){p=null,d||l.apply(t,e)},s),n&&l.apply(t,e)});var l,s,d,p;o(f,"scroll",a),f===e&&o(e,"resize",a);r&&function(t,e,n){var r=new MutationObserver(function(t){!0===t.some(u)&&setTimeout(n,0)}),o=Array.prototype.filter,i=Array.prototype.concat;function u(e){var n=i.call([],Array.prototype.slice.call(e.addedNodes),e.target);return o.call(n,t.isWatched).length>0}r.observe(e,{childList:!0,subtree:!0,attributes:!0})}(c,t,a);u>0&&setInterval(a,u);function v(n,r){if(!n)return!1;if(!i(e.document.documentElement,n)||!i(e.document.documentElement,t))return!1;if(!n.offsetWidth||!n.offsetHeight)return!1;var o=n.getBoundingClientRect(),u={};if(t===e.document.body)u={top:-r,left:-r,right:e.document.documentElement.clientWidth+r,bottom:e.document.documentElement.clientHeight+r};else{var c=t.getBoundingClientRect();u={top:c.top-r,left:c.left-r,right:c.right+r,bottom:c.bottom+r}}var f=o.right>=u.left&&o.left<=u.right&&o.bottom>=u.top&&o.top<=u.bottom;return f}return{container:t,isInViewport:function(t,e,n){if(!n)return v(t,e);var r=function(t,e,n){return{watch:function(){c.add(t,e,n)},dispose:function(){c.remove(t)}}}(t,e,n);return r.watch(),r},_debounce:n,_failsafe:u}}(a,s,d))-1].isInViewport(t,l,c)};var n=[],r="function"==typeof e.MutationObserver;function o(t,e,n){t.attachEvent?t.attachEvent("on"+e,n):t.addEventListener(e,n,!1)}var i=function(){return!e.document||(e.document.documentElement.compareDocumentPosition?function(t,e){return!!(16&t.compareDocumentPosition(e))}:e.document.documentElement.contains?function(t,e){return t!==e&&!!t.contains&&t.contains(e)}:function(t,e){for(;e=e.parentNode;)if(e===t)return!0;return!1})}}).call(this,n(2))},function(t,e){var n;n=function(){return this}();try{n=n||new Function("return this")()}catch(t){"object"==typeof window&&(n=window)}t.exports=n}])});

2

package.json
{
"name": "shimmer-lazyload",
"version": "4.0.0",
"version": "4.0.1",
"description": "Image lazy loading",

@@ -5,0 +5,0 @@ "main": "./src/index.js",

134

README.md

@@ -1,24 +0,25 @@

**NOTE FROM MAINTAINERS**
This library is still working but not actively maintained, we recommend you use https://github.com/ApoorvSaxena/lozad.js first rather than this one.
**/NOTE FROM MAINTAINERS**
# lazyload
# lazyload [![Dependency Status](http://img.shields.io/david/vvo/lazyload.svg?style=flat-square)](https://david-dm.org/vvo/lazyload) [![devDependency Status](http://img.shields.io/david/dev/vvo/lazyload.svg?style=flat-square)](https://david-dm.org/vvo/lazyload#info=devDependencies)
[![GitHub release](https://img.shields.io/github/release/NeuShimmer/lazyload.svg?style=flat-square)](https://github.com/NeuShimmer/lazyload/releases)
[![license](https://img.shields.io/github/license/NeuShimmer/lazyload.svg?style=flat-square)](https://github.com/NeuShimmer/lazyload/blob/master/LICENSE)
[![license](https://img.shields.io/npm/dt/shimmer-lazyload.svg?style=flat-square)](https://www.npmjs.com/package/shimmer-lazyload)
Lazyload images, iframes or any src* element until they are visible in the viewport.
[![Selenium Test Status](https://saucelabs.com/browser-matrix/lazyloadvvo.svg)](https://saucelabs.com/u/lazyloadvvo)
## Install
```shell
npm install lazyloadjs --save
npm i shimmer-lazyload
// or
yarn add shimmer-lazyload
```
Also available for `<script>` users:
- https://cdnjs.com/libraries/lazyloadjs
Or you can use `script` tag:
## Simple example
```html
<script src="https://unpkg.com/shimmer-lazyload@^4.0/dist/lazyload.min.js"></script>
```
See more [examples](examples/).
## Usage
### Simple example
```html

@@ -31,3 +32,3 @@ <!DOCTYPE html>

<body>
<script src="lazyload.min.js"></script>
<script src="https://unpkg.com/shimmer-lazyload@^4.0/dist/lazyload.min.js"></script>

@@ -38,5 +39,10 @@ <!-- A lot of content -->

<img
id="img"
data-src="real/image/src.jpg"
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
onload="lzld(this)">
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==">
<script>
var lzld = lazyload();
lzld(document.getElementById(img));
</script>
</body>

@@ -46,34 +52,6 @@ </html>

Make sure your webpage is in [standards mode](http://en.wikipedia.org/wiki/Document_Type_Declaration#HTML5_DTD-less_DOCTYPE).
### API
Viewport computing is badly handled by browsers when in [quirksmode](http://en.wikipedia.org/wiki/Quirks_mode).
**var lzld = lazyload([opts])**
If you do not want to use a data-uri as your src, you can also use the provided [b.gif](b.gif) which is
the [tiniest gif ever](http://probablyprogramming.com/2009/03/15/the-tiniest-gif-ever).
On most websites, you better let the first top images not bound to lzld method.
So that they shows really fast.
## Advanced example
`lazyloadjs` is an npm module and is compatible with browserify.
```js
global.myLazyload = require('lazyloadjs')();
```
```html
<img
data-src="real/image/src.jpg"
src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
onload="myLazyload(this)">
```
Per default, `lazyloadjs` exposes the `lzld` instance on the global
object. So that in most cases, you just need to require it in your webpage.
## API
## var lzld = lazyload([opts])
`opts` is an object with these defaults:

@@ -83,5 +61,7 @@

{
container: document.body,
offset: 333,
src: 'data-src' // or function(elt) { return customSrc }
'offset': 200,
'src': 'data-src',
'container': false,
'loader': null,
'replaceGetAttribute': false
}

@@ -95,11 +75,14 @@ ```

`src` is the attribute name storing the real src of the element to load.
`src` can also be a `function`, so that you can have your custom `src` computing algorithm.
`opts.src` is the attribute name storing the real src of the element to load, or it can also be a `function`, so that you can have your custom `src` computing algorithm.
You can use it to [lazyload High DPI/retina images](examples/hidpi.html).
## Launching the examples
`opts.loader` is the `function` that you can custom the load behaviour, for example, load it into "background-image". see [examples/custom-loader.html](examples/custom-loader.html).
```shell
npm run examples
`opts.replaceGetAttribute` replace the default getAttribute or not.
Then, add the elements to lazyload:
```javascript
lzld(document.getElementById('image'));
lzld(document.querySelectorAll('img'));
```

@@ -113,49 +96,22 @@

npm run dev
// or
yarn dev
```
Browse to [http://localhost:8080/__zuul](http://localhost:8080/__zuul).
[Tests](test/) are written with [mocha](https://github.com/visionmedia/mocha).
## Building
We provide a pre-built version of `lazyloadjs` in `build/lazyload.min.js`.
We provide a pre-built version of `lazyload` in `dist/lazyload.min.js`.
But you can build your own:
You can build your own:
```shell
npm run build
// or
yarn build
```
You get the build in `build/lazyload.min.js`.
You get the build in `dist/lazyload.min.js`.
Please consider using [browserify](https://github.com/substack/node-browserify).
## Sites using lazyload
Tens of millions of pageviews are served each month using this project:
* [fasterize.com](http://fasterize.com) `lazyload` was first developed at fasterize (WPO solution)
* [lemonde.fr](http://www.lemonde.fr)
* [pluzz.francetv.fr](http://pluzz.francetv.fr)
* [pcinpact.com](http://www.pcinpact.com)
* [elpais.com](http://www.elpais.com)
* [playtv.fr](http://playtv.fr)
* [voyages-sncf.com](http://www.voyages-sncf.com)
* [rue89.com](http://www.rue89.com)
* [flipkart.com](http://www.flipkart.com/)
* [clubic.com](http://clubic.com)
* [achetezfacile.com](http://www.achetezfacile.com/)
* [mapado.com](http://www.mapado.com/)
* [decitre.fr](http://www.decitre.fr/)
* [base-orb.fr](http://www.base-orb.fr/)
* [nearbuy.com](http://www.nearbuy.com/)
* [winni.in](https://www.winni.in)
.. And many unlisted websites, [add yours](https://github.com/vvo/lazyload/edit/master/README.md)!
## Licence
Also see [LICENCE.fasterize](LICENCE.fasterize)
(The MIT Licence)

@@ -162,0 +118,0 @@

25

src/index.js
import inViewport from 'in-viewport';
const lazyAttrs = ['data-src'];
const replacedGetAttribute = [];
function lazyload(opt) {
const lazyAttrs = ['data-src'];
const opts = Object.assign({

@@ -24,2 +25,6 @@ 'offset': 200,

function show(elt) {
if (elt.getAttribute('data-lzled')) {
return;
}
const src = findRealSrc(elt);

@@ -48,2 +53,6 @@

function register(elt) {
if (elt instanceof Array || elt instanceof NodeList || elt instanceof HTMLCollection) {
Array.prototype.forEach.call(elt, e => register(e));
return;
}
// unsubscribe onload

@@ -60,3 +69,5 @@ // needed by IE < 9, otherwise we get another onload when changing the src

inViewport(elt, opts, show);
replaceGetAttribute(elt);
if (opts.replaceGetAttribute) {
replaceGetAttribute(elt);
}
}

@@ -69,9 +80,9 @@ }

function replaceGetAttribute(elt) {
const elementName = elt.__proto__;
if (replacedGetAttribute.indexOf(elementName) !== -1) {
const elementPrototype = elt.__proto__;
if (replacedGetAttribute.indexOf(elementPrototype) !== -1) {
return;
}
const original = elementName.getAttribute;
elementName.getAttribute = function(name) {
const original = elementPrototype.getAttribute;
elementPrototype.getAttribute = function(name) {
if (name === 'src') {

@@ -93,4 +104,6 @@ var realSrc;

};
replacedGetAttribute.push(elementPrototype);
}
export default lazyload;
dist/lazyload.js.map

Sorry, the diff of this file is not supported yet

examples/custom-container.html

Sorry, the diff of this file is not supported yet

examples/hidpi.html

Sorry, the diff of this file is not supported yet

examples/simple.html

Sorry, the diff of this file is not supported yet