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

vanilla-lazyload

Package Overview
Dependencies
Maintainers
1
Versions
148
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vanilla-lazyload - npm Package Compare versions

Comparing version 2.1.2 to 3.0.0

demos/with_picture.html

73

bower.json
{
"name": "vanilla-lazyload",
"homepage": "http://verlok.github.io/lazyload/",
"authors": [
"Andrea Verlicchi <andrea.verlicchi@gmail.com>"
],
"description": "LazyLoad is a fast, lightweight and flexible script for loading images only when they're about to enter the viewport of a scrollable area, with an excellent support to the progressive JPEG image format",
"main": "dist/lazyload.min.js",
"keywords": [
"lazy",
"load",
"progressive",
"JPEG",
"performance",
"no-jquery"
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests",
"src",
"img",
"demos",
"Gruntfile.js",
"README.md",
"todo.md",
"favicon.ico",
"index.html",
"package.json"
]
}
"name": "vanilla-lazyload",
"homepage": "http://verlok.github.io/lazyload/",
"authors": [
"Andrea Verlicchi <andrea.verlicchi@gmail.com>"
],
"description": "A fast, lightweight script to load images as they enter the viewport. Supporting responsive images (both srcset + sizes and picture).",
"main": "dist/lazyload.min.js",
"keywords": [
"lazy",
"load",
"responsive",
"images",
"picture",
"srcset",
"sizes",
"progressive",
"JPEG",
"performance",
"perfmatters",
"no-jquery",
"vanilla"
],
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests",
"src",
"img",
"demos",
"Gruntfile.js",
"README.md",
"todo.md",
"favicon.ico",
"index.html",
"package.json"
]
}

0

demos/perf/jquery.lazyload.min.js
/*! Lazy Load 1.9.3 - MIT license - Copyright 2010-2013 Mika Tuupola */
!function(a,b,c,d){var e=a(b);a.fn.lazyload=function(f){function g(){var b=0;i.each(function(){var c=a(this);if(!j.skip_invisible||c.is(":visible"))if(a.abovethetop(this,j)||a.leftofbegin(this,j));else if(a.belowthefold(this,j)||a.rightoffold(this,j)){if(++b>j.failure_limit)return!1}else c.trigger("appear"),b=0})}var h,i=this,j={threshold:0,failure_limit:0,event:"scroll",effect:"show",container:b,data_attribute:"original",skip_invisible:!0,appear:null,load:null,placeholder:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC"};return f&&(d!==f.failurelimit&&(f.failure_limit=f.failurelimit,delete f.failurelimit),d!==f.effectspeed&&(f.effect_speed=f.effectspeed,delete f.effectspeed),a.extend(j,f)),h=j.container===d||j.container===b?e:a(j.container),0===j.event.indexOf("scroll")&&h.bind(j.event,function(){return g()}),this.each(function(){var b=this,c=a(b);b.loaded=!1,(c.attr("src")===d||c.attr("src")===!1)&&c.is("img")&&c.attr("src",j.placeholder),c.one("appear",function(){if(!this.loaded){if(j.appear){var d=i.length;j.appear.call(b,d,j)}a("<img />").bind("load",function(){var d=c.attr("data-"+j.data_attribute);c.hide(),c.is("img")?c.attr("src",d):c.css("background-image","url('"+d+"')"),c[j.effect](j.effect_speed),b.loaded=!0;var e=a.grep(i,function(a){return!a.loaded});if(i=a(e),j.load){var f=i.length;j.load.call(b,f,j)}}).attr("src",c.attr("data-"+j.data_attribute))}}),0!==j.event.indexOf("scroll")&&c.bind(j.event,function(){b.loaded||c.trigger("appear")})}),e.bind("resize",function(){g()}),/(?:iphone|ipod|ipad).*os 5/gi.test(navigator.appVersion)&&e.bind("pageshow",function(b){b.originalEvent&&b.originalEvent.persisted&&i.each(function(){a(this).trigger("appear")})}),a(c).ready(function(){g()}),this},a.belowthefold=function(c,f){var g;return g=f.container===d||f.container===b?(b.innerHeight?b.innerHeight:e.height())+e.scrollTop():a(f.container).offset().top+a(f.container).height(),g<=a(c).offset().top-f.threshold},a.rightoffold=function(c,f){var g;return g=f.container===d||f.container===b?e.width()+e.scrollLeft():a(f.container).offset().left+a(f.container).width(),g<=a(c).offset().left-f.threshold},a.abovethetop=function(c,f){var g;return g=f.container===d||f.container===b?e.scrollTop():a(f.container).offset().top,g>=a(c).offset().top+f.threshold+a(c).height()},a.leftofbegin=function(c,f){var g;return g=f.container===d||f.container===b?e.scrollLeft():a(f.container).offset().left,g>=a(c).offset().left+f.threshold+a(c).width()},a.inviewport=function(b,c){return!(a.rightoffold(b,c)||a.leftofbegin(b,c)||a.belowthefold(b,c)||a.abovethetop(b,c))},a.extend(a.expr[":"],{"below-the-fold":function(b){return a.belowthefold(b,{threshold:0})},"above-the-top":function(b){return!a.belowthefold(b,{threshold:0})},"right-of-screen":function(b){return a.rightoffold(b,{threshold:0})},"left-of-screen":function(b){return!a.rightoffold(b,{threshold:0})},"in-viewport":function(b){return a.inviewport(b,{threshold:0})},"above-the-fold":function(b){return!a.belowthefold(b,{threshold:0})},"right-of-fold":function(b){return a.rightoffold(b,{threshold:0})},"left-of-fold":function(b){return!a.rightoffold(b,{threshold:0})}})}(jQuery,window,document);

2

dist/lazyload.min.js

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

!function(a,b){"function"==typeof define&&define.amd?define([],b):"object"==typeof exports?module.exports=b():a.LazyLoad=b()}(this,function(){function a(){q||(m={elements_selector:"img",container:window,threshold:300,throttle:50,data_src:"original",data_srcset:"original-set",class_loading:"loading",class_loaded:"loaded",skip_invisible:!0,show_while_loading:!0,callback_load:null,callback_error:null,callback_set:null,callback_processed:null,placeholder:"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"},n=!!window.addEventListener,o=!!window.attachEvent,p=!!document.body.classList,q=!0)}function b(a,b,c){return n?void a.addEventListener(b,c):void(o&&(a.attachEvent("on"+b,function(a){return function(){c.call(a,window.event)}}(a)),a=null))}function c(a,b,c){return n?void a.removeEventListener(b,c):void(o&&a.detachEvent("on"+b,c))}function d(a,b,c){function d(){return window.innerWidth||l.documentElement.clientWidth||document.body.clientWidth}function e(){return window.innerHeight||l.documentElement.clientHeight||document.body.clientHeight}function f(a){return a.getBoundingClientRect().top+m-l.documentElement.clientTop}function g(a){return a.getBoundingClientRect().left+n-l.documentElement.clientLeft}function h(){var d;return d=b===window?e()+m:f(b)+b.offsetHeight,d<=f(a)-c}function i(){var e;return e=b===window?d()+window.pageXOffset:g(b)+d(),e<=g(a)-c}function j(){var d;return d=b===window?m:f(b),d>=f(a)+c+a.offsetHeight}function k(){var d;return d=b===window?n:g(b),d>=g(a)+c+a.offsetWidth}var l,m,n;return l=a.ownerDocument,m=window.pageYOffset||l.body.scrollTop,n=window.pageXOffset||l.body.scrollLeft,!(h()||j()||i()||k())}function e(){var a=new Date;return a.getTime()}function f(a,b){var c,d={};for(c in a)a.hasOwnProperty(c)&&(d[c]=a[c]);for(c in b)b.hasOwnProperty(c)&&(d[c]=b[c]);return d}function g(a){try{return Array.prototype.slice.call(a)}catch(e){var b,c=[],d=a.length;for(b=0;b<d;b++)c.push(a[b]);return c}}function h(a,b){return p?void a.classList.add(b):void(a.className+=(a.className?" ":"")+b)}function i(a,b){return p?void a.classList.remove(b):void(a.className=a.className.replace(new RegExp("(^|\\s+)"+b+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,""))}function j(a,b,c,d){var e=b.getAttribute("data-"+d),f=b.getAttribute("data-"+c),g=a.tagName;return"IMG"===g?(f&&a.setAttribute("srcset",f),void(e&&a.setAttribute("src",e))):"IFRAME"===g?void(e&&a.setAttribute("src",e)):void(a.style.backgroundImage="url("+e+")")}function k(a,b){return function(){return a.apply(b,arguments)}}function l(c){a(),this._settings=f(m,c),this._queryOriginNode=this._settings.container===window?document:this._settings.container,this._previousLoopTime=0,this._loopTimeout=null,this._handleScrollFn=k(this.handleScroll,this),b(window,"resize",this._handleScrollFn),this.update()}var m,n,o,p,q=!1;return l.prototype._showOnLoad=function(a){function d(){null!==f&&(f.callback_load&&f.callback_load(a),j(a,a,f.data_srcset,f.data_src),f.callback_set&&f.callback_set(a),i(a,f.class_loading),h(a,f.class_loaded),c(e,"load",d))}var e,f=this._settings;a.getAttribute("src")||a.setAttribute("src",f.placeholder),e=document.createElement("img"),b(e,"load",d),b(e,"error",function(){i(a,f.class_loading),f.callback_error&&f.callback_error(a)}),h(a,f.class_loading),j(e,a,f.data_srcset,f.data_src)},l.prototype._showOnAppear=function(a){function d(){null!==e&&(e.callback_load&&e.callback_load(a),i(a,e.class_loading),h(a,e.class_loaded),c(a,"load",d))}var e=this._settings;"IMG"!==a.tagName&&"IFRAME"!==a.tagName||(b(a,"load",d),b(a,"error",function(){c(a,"load",d),i(a,e.class_loading),e.callback_error&&e.callback_error(a)}),h(a,e.class_loading)),j(a,a,e.data_srcset,e.data_src),e.callback_set&&e.callback_set(a)},l.prototype._loopThroughElements=function(){var a,b,c=this._settings,e=this._elements,f=e?e.length:0,g=[];for(a=0;a<f;a++)b=e[a],c.skip_invisible&&null===b.offsetParent||d(b,c.container,c.threshold)&&(c.show_while_loading?this._showOnAppear(b):this._showOnLoad(b),g.push(a),b.wasProcessed=!0);for(;g.length>0;)e.splice(g.pop(),1),c.callback_processed&&c.callback_processed(e.length);0===f&&this._stopScrollHandler()},l.prototype._purgeElements=function(){var a,b,c=this._elements,d=c.length,e=[];for(a=0;a<d;a++)b=c[a],b.wasProcessed&&e.push(a);for(;e.length>0;)c.splice(e.pop(),1)},l.prototype._startScrollHandler=function(){this._isHandlingScroll||(this._isHandlingScroll=!0,b(this._settings.container,"scroll",this._handleScrollFn))},l.prototype._stopScrollHandler=function(){this._isHandlingScroll&&(this._isHandlingScroll=!1,c(this._settings.container,"scroll",this._handleScrollFn))},l.prototype.handleScroll=function(){var a,b,c;this._settings&&(b=e(),c=this._settings.throttle,0!==c?(a=c-(b-this._previousLoopTime),a<=0||a>c?(this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._previousLoopTime=b,this._loopThroughElements()):this._loopTimeout||(this._loopTimeout=setTimeout(k(function(){this._previousLoopTime=e(),this._loopTimeout=null,this._loopThroughElements()},this),a))):this._loopThroughElements())},l.prototype.update=function(){this._elements=g(this._queryOriginNode.querySelectorAll(this._settings.elements_selector)),this._purgeElements(),this._loopThroughElements(),this._startScrollHandler()},l.prototype.destroy=function(){c(window,"resize",this._handleScrollFn),this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._stopScrollHandler(),this._elements=null,this._queryOriginNode=null,this._settings=null},l});
!function(a,b){"function"==typeof define&&define.amd?define([],b):"object"==typeof exports?module.exports=b():a.LazyLoad=b()}(this,function(){function a(){r||(n={elements_selector:"img",container:window,threshold:300,throttle:50,data_src:"original",data_srcset:"original-set",class_loading:"loading",class_loaded:"loaded",skip_invisible:!0,callback_load:null,callback_error:null,callback_set:null,callback_processed:null},o=!!window.addEventListener,p=!!window.attachEvent,q=!!document.body.classList,r=!0)}function b(a,b,c){return o?void a.addEventListener(b,c):void(p&&(a.attachEvent("on"+b,function(a){return function(){c.call(a,window.event)}}(a)),a=null))}function c(a,b,c){return o?void a.removeEventListener(b,c):void(p&&a.detachEvent("on"+b,c))}function d(a,b,c){function d(){return window.innerWidth||l.documentElement.clientWidth||document.body.clientWidth}function e(){return window.innerHeight||l.documentElement.clientHeight||document.body.clientHeight}function f(a){return a.getBoundingClientRect().top+m-l.documentElement.clientTop}function g(a){return a.getBoundingClientRect().left+n-l.documentElement.clientLeft}function h(){var d;return d=b===window?e()+m:f(b)+b.offsetHeight,d<=f(a)-c}function i(){var e;return e=b===window?d()+window.pageXOffset:g(b)+d(),e<=g(a)-c}function j(){var d;return d=b===window?m:f(b),d>=f(a)+c+a.offsetHeight}function k(){var d;return d=b===window?n:g(b),d>=g(a)+c+a.offsetWidth}var l,m,n;return l=a.ownerDocument,m=window.pageYOffset||l.body.scrollTop,n=window.pageXOffset||l.body.scrollLeft,!(h()||j()||i()||k())}function e(){var a=new Date;return a.getTime()}function f(a,b){var c,d={};for(c in a)a.hasOwnProperty(c)&&(d[c]=a[c]);for(c in b)b.hasOwnProperty(c)&&(d[c]=b[c]);return d}function g(a){try{return Array.prototype.slice.call(a)}catch(b){var c,d=[],e=a.length;for(c=0;e>c;c++)d.push(a[c]);return d}}function h(a,b){return q?void a.classList.add(b):void(a.className+=(a.className?" ":"")+b)}function i(a,b){return q?void a.classList.remove(b):void(a.className=a.className.replace(new RegExp("(^|\\s+)"+b+"(\\s+|$)")," ").replace(/^\s+/,"").replace(/\s+$/,""))}function j(a,b){var c=a.parentElement;if("PICTURE"===c.tagName)for(var d=0;d<c.children.length;d++){var e=c.children[d];if("SOURCE"===e.tagName){var f=e.getAttribute("data-"+b);f&&e.setAttribute("srcset",f)}}}function k(a,b,c){var d=a.tagName,e=a.getAttribute("data-"+c);if("IMG"===d){j(a,b);var f=a.getAttribute("data-"+b);return f&&a.setAttribute("srcset",f),void(e&&a.setAttribute("src",e))}return"IFRAME"===d?void(e&&a.setAttribute("src",e)):void(a.style.backgroundImage="url("+e+")")}function l(a,b){return function(){return a.apply(b,arguments)}}function m(c){a(),this._settings=f(n,c),this._queryOriginNode=this._settings.container===window?document:this._settings.container,this._previousLoopTime=0,this._loopTimeout=null,this._handleScrollFn=l(this.handleScroll,this),b(window,"resize",this._handleScrollFn),this.update()}var n,o,p,q,r=!1;return m.prototype._showOnAppear=function(a){function d(){null!==e&&(e.callback_load&&e.callback_load(a),i(a,e.class_loading),h(a,e.class_loaded),c(a,"load",d))}var e=this._settings;("IMG"===a.tagName||"IFRAME"===a.tagName)&&(b(a,"load",d),b(a,"error",function(){c(a,"load",d),i(a,e.class_loading),e.callback_error&&e.callback_error(a)}),h(a,e.class_loading)),k(a,e.data_srcset,e.data_src),e.callback_set&&e.callback_set(a)},m.prototype._loopThroughElements=function(){var a,b,c=this._settings,e=this._elements,f=e?e.length:0,g=[];for(a=0;f>a;a++)b=e[a],c.skip_invisible&&null===b.offsetParent||d(b,c.container,c.threshold)&&(this._showOnAppear(b),g.push(a),b.wasProcessed=!0);for(;g.length>0;)e.splice(g.pop(),1),c.callback_processed&&c.callback_processed(e.length);0===f&&this._stopScrollHandler()},m.prototype._purgeElements=function(){var a,b,c=this._elements,d=c.length,e=[];for(a=0;d>a;a++)b=c[a],b.wasProcessed&&e.push(a);for(;e.length>0;)c.splice(e.pop(),1)},m.prototype._startScrollHandler=function(){this._isHandlingScroll||(this._isHandlingScroll=!0,b(this._settings.container,"scroll",this._handleScrollFn))},m.prototype._stopScrollHandler=function(){this._isHandlingScroll&&(this._isHandlingScroll=!1,c(this._settings.container,"scroll",this._handleScrollFn))},m.prototype.handleScroll=function(){var a,b,c;this._settings&&(b=e(),c=this._settings.throttle,0!==c?(a=c-(b-this._previousLoopTime),0>=a||a>c?(this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._previousLoopTime=b,this._loopThroughElements()):this._loopTimeout||(this._loopTimeout=setTimeout(l(function(){this._previousLoopTime=e(),this._loopTimeout=null,this._loopThroughElements()},this),a))):this._loopThroughElements())},m.prototype.update=function(){this._elements=g(this._queryOriginNode.querySelectorAll(this._settings.elements_selector)),this._purgeElements(),this._loopThroughElements(),this._startScrollHandler()},m.prototype.destroy=function(){c(window,"resize",this._handleScrollFn),this._loopTimeout&&(clearTimeout(this._loopTimeout),this._loopTimeout=null),this._stopScrollHandler(),this._elements=null,this._queryOriginNode=null,this._settings=null},m});
//# sourceMappingURL=lazyload.min.js.map

0

Gruntfile.js

@@ -0,0 +0,0 @@ module.exports = function(grunt) {

0

license.md

@@ -0,0 +0,0 @@ The MIT License (MIT)

71

package.json
{
"name": "vanilla-lazyload",
"version": "2.1.2",
"description": "LazyLoad is a fast, lightweight and flexible script for loading images only when they're about to enter the viewport of a scrollable area, with an excellent support to the progressive JPEG image format. Typescript module definition is available.",
"main": "dist/lazyload.min.js",
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-concat": "^1.0.1",
"grunt-contrib-jshint": "~0.10.0",
"grunt-contrib-uglify": "~0.6.0",
"grunt-contrib-watch": "~0.6.1"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "https://github.com/verlok/lazyload"
},
"keywords": [
"lazy load",
"progressive JPEG",
"performance",
"no-jquery"
],
"author": "Andrea \"verlok\" Verlicchi",
"license": "MIT",
"bugs": {
"url": "https://github.com/verlok/lazyload/issues"
},
"homepage": "http://verlok.github.io/lazyload"
}
"name": "vanilla-lazyload",
"version": "3.0.0",
"description": "A fast, lightweight script to load images as they enter the viewport. Supporting responsive images (both srcset + sizes and picture).",
"main": "dist/lazyload.min.js",
"devDependencies": {
"grunt": "~0.4.5",
"grunt-contrib-concat": "^1.0.1",
"grunt-contrib-jshint": "~0.10.0",
"grunt-contrib-uglify": "~0.6.0",
"grunt-contrib-watch": "~0.6.1"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "https://github.com/verlok/lazyload"
},
"keywords": [
"lazy",
"load",
"responsive",
"images",
"picture",
"srcset",
"sizes",
"progressive",
"JPEG",
"performance",
"perfmatters",
"no-jquery",
"vanilla"
],
"author": "Andrea \"verlok\" Verlicchi",
"license": "MIT",
"bugs": {
"url": "https://github.com/verlok/lazyload/issues"
},
"homepage": "http://verlok.github.io/lazyload"
}

90

README.md

@@ -13,7 +13,7 @@ # LazyLoad (aka Vanilla LazyLoad)

* **_LazyLoad_ is 6x faster than _jQuery_lazyload_**. This is because _LazyLoad_ uses only optimized, native javascript functions and methods, and not jQuery. Your users will see the difference, even in slow devices or computers. To measure the scripts performance yourself, see [lazyLoad](http://verlok.github.io/lazyload/demos/perf/with_lazyLoad.html) and [jQuery_lazyLoad](http://verlok.github.io/lazyload/demos/perf/with_jQuery_lazyLoad.html) implementations in the _perf_ folder.
* **Progressive JPEG support will improve perceived speed**. [Progressive JPEG](http://blog.patrickmeenan.com/2013/06/progressive-jpegs-ftw.html) is an image format good for perceived performance because it's rendered in progressive passes of detail. `lazyLoad` has an option called `show_while_loading` that, when set to `true`, shows your images while they load, letting *progressive JPEG* do its magic. As _jQuery\_lazyload_ doesn't have this option, it will only show your images once fully loaded.
* **Progressive JPEG support will improve perceived speed**. [Progressive JPEG](http://blog.patrickmeenan.com/2013/06/progressive-jpegs-ftw.html) is an image format good for perceived performance because it's rendered in progressive passes of detail. `lazyLoad` shows your images while they load, letting *progressive JPEG* do its magic. _jQuery\_lazyload_ will only show your images once fully loaded.
* **_LazyLoad_ can be instanced on many scrolling containers** on the same page, whereas _jQuery\_lazyload_ can't.
* **Throttled execution for optimized CPU usage**. _LazyLoad_'s listener to the container's `scroll` event is throttled by default, meaning that the main function of the script will not continuously be executed on devices with a smooth scroll such as mobile devices or Macs. _jQuery\_lazyload_ doesn't have this option, so its scroll handler function is executed more frequently then necessary, slowing down the user device.
* **Support for `srcset` attribute**. _LazyLoad_ also supports the srcset attribute, today supported in modern browsers to provide HD images for high-density displays (aka Retina display).
* **jQuery independency**. As _LazyLoad_ doesn't rely on jQuery, you can use it in contexts where jQuery is not available.
* **Support for responsive images**. _LazyLoad_ also supports responsive images, both via the `srcset` attribute (`x` notation, i.g. `1x`, `2x` .. `nx` and `w` notation, i.g. `100w`, `200w` + `sizes` attribute), and via the `picture` tag.
* **jQuery independency**. As _LazyLoad_ doesn't rely on jQuery, you can use it in contexts where jQuery is not used (and it's much, much faster)!

@@ -25,3 +25,3 @@ ## How to use

Markup your images putting the image source inside the `data-original` attribute.
Specify both `width` and `height` attributes so the browser can allocate the space on your page.
Specify both `width` and `height` attributes if known upfront, so the browser can allocate the space on your page.

@@ -34,15 +34,2 @@ ```html

To allow the lazyload script to display images where JavaScript isn't
available, simply add a ```noscript```tag:
```html
<img data-original="/your/image1.jpg" width="100" height="172">
<noscript><img src="/your/image1.jpg" width="100" height="172"></noscript>
<img data-original="/your/image2.jpg" width="100" height="172">
<noscript><img src="/your/image2.jpg" width="100" height="172"></noscript>
<img data-original="/your/image3.jpg" width="100" height="172">
<noscript><img src="/your/image13jpg" width="100" height="172"></noscript>
```
Or if you want to use `srcset`:

@@ -69,3 +56,3 @@

<img data-original="/your/image2.jpg"
data-original-set="/your/image2.jpg 200x, /your/image2@2x.jpg 400w"
data-original-set="/your/image2.jpg 200w, /your/image2@2x.jpg 400w"
sizes="(min-width: 20em) 35vw, 100vw">

@@ -77,35 +64,20 @@ <img data-original="/your/image3.jpg"

Or, for the kitchen sink approach:
Or if you want to use the `picture` tag:
```html
<img data-original="/your/image1.jpg"
data-original-set="/your/image1.jpg 200w, /your/image1@2x.jpg 400w"
sizes="(min-width: 20em) 35vw, 100vw">
<noscript>
<picture alt="your alt text">
<img src="/your/image1.jpg"
srcset="/your/image1.jpg 200w, /your/image1@2x.jpg 400w"
alt="your alt text">
</picture>
</noscript>
<img data-original="/your/image2.jpg"
data-original-set="/your/image2.jpg 200x, /your/image2@2x.jpg 400w"
sizes="(min-width: 20em) 35vw, 100vw">
<noscript>
<picture alt="your alt text">
<img src="/your/image2.jpg"
srcset="/your/image2.jpg 200w, /your/image2@2x.jpg 400w"
alt="your alt text">
</picture>
</noscript>
<img data-original="/your/image3.jpg"
data-original-set="/your/image3.jpg 200w, /your/image3@2x.jpg 400w"
sizes="(min-width: 20em) 35vw, 100vw">
<noscript>
<picture alt="your alt text">
<img src="/your/image3.jpg"
srcset="/your/image3.jpg 200w, /your/image3@2x.jpg 400w"
alt="your alt text">
</picture>
</noscript>
<picture>
<source media="(min-width: 1024px)" data-original-set="/your/image1a.jpg" />
<source media="(min-width: 500px)" data-original-set="/your/image1b.jpg" />
<img alt="Stivaletti" data-original="/your/image1.jpg">
</picture>
<picture>
<source media="(min-width: 1024px)" data-original-set="/your/image2a.jpg" />
<source media="(min-width: 500px)" data-original-set="/your/image2b.jpg" />
<img alt="Stivaletti" data-original="/your/image2.jpg">
</picture>
<picture>
<source media="(min-width: 1024px)" data-original-set="/your/image3a.jpg" />
<source media="(min-width: 500px)" data-original-set="/your/image3b.jpg" />
<img alt="Stivaletti" data-original="/your/image3.jpg">
</picture>
```

@@ -153,5 +125,5 @@

Be sure that the images that are going to be lazy loaded **occupy the same space of loaded images (*)**.
Be sure that the images that are going to be lazy loaded **occupy some vertical space (*)**, ideally the same space of the loaded images.
To do that, you can either set a placeholder image in your HTML (which nullifies the effect of the `show_while_loading` option), or you can size all your `img` elements using CSS, for example doing this:
To do that you can size all your `img` elements using CSS, for example doing this:

@@ -179,3 +151,3 @@ ```css

Furthermore, if we are using the `show_while_loading` option (which defaults to `true`), we need to deal with a Firefox anomaly that still shows the "broken image" icon while the image is loading. The CSS code that does this trick is the following:
Furthermore, we need to deal with a Firefox anomaly that still shows the "broken image" icon while the image is loading. The CSS code that does this trick is the following:

@@ -209,7 +181,5 @@ ```css

| `skip_invisible` | Specifies whether the script has to consider invisible images or not | `true` |
| `show_while_loading` | Specifies whether the script must show the images while they are loading. Set it to `true` when you use progressive JPEG format for your images, to `false` if you want to wait until the loading images is loaded to display it. **Note**: to make the image visible while loading, you will have to avoid setting the `src` attribute in the `img` tag | `true` |
| `callback_load` | A function to be called when an image was loaded. | `null` |
| `callback_set` | A function to be called when the src of an image is set in the DOM. | `null` |
| `callback_processed` | A function to be called when an image was processed. | `null` |
| `placeholder` | The URL of a placeholder image to be shown while the original image is loading. This option is ignored when the option `show_while_loading` is set to `true` | (A base64 encoded 1x1 transp. gif) |

@@ -234,3 +204,3 @@ ## Public methods

#### With `srcset` (1x 2x) demo
#### With `srcset` attribute (1x 2x notation) demo

@@ -241,3 +211,3 @@ The images also rely on the **`srcset` attribute** to be loaded lazily. Just pass in the `data_srcset` option and the job will be done.

#### With `srcset` + `sizes` demo
#### With `srcset` + `sizes` attributes demo

@@ -248,2 +218,8 @@ The images also rely on the **`srcset` attribute** to be loaded lazily, and on the `sizes` attribute to be sized. Just pass in the `data_srcset` option, set the `sizes` attribute normally and the job will be done.

#### With `picture` tag demo
The images can also be marked up using the `picture` tag and still be loaded lazily. Just pass in the `data_srcset` option and the job will be done.
[See it in action](http://verlok.github.io/lazyload/demos/with_picture.html) | [View source](https://github.com/verlok/lazyload/blob/master/demos/with_picture.html)
#### Lazy loading `iframe` demo

@@ -253,3 +229,3 @@

[See it in action](http://verlok.github.io/lazyload/demos/iframes.html) | [View source](https://github.com/verlok/lazyload/blob/master/demos/iframes.html)
[See it in action](http://verlok.github.io/lazyload/demos/with_p.html) | [View source](https://github.com/verlok/lazyload/blob/master/demos/iframes.html)

@@ -256,0 +232,0 @@ #### Using background images demo

88

src/lazyload.js

@@ -35,8 +35,6 @@ (function(root, factory) {

skip_invisible: true,
show_while_loading: true,
callback_load: null,
callback_error: null,
callback_set: null,
callback_processed: null,
placeholder: "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
callback_processed: null
};

@@ -203,16 +201,33 @@ _supportsAddEventListener = !!window.addEventListener;

function _setSources(target, source, srcsetDataAttribute, srcDataAttribute) {
var src = source.getAttribute('data-' + srcDataAttribute);
var srcSet = source.getAttribute('data-' + srcsetDataAttribute);
var tagName = target.tagName;
function _setSourcesForPicture(element, srcsetDataAttribute) {
var parent = element.parentElement;
if (parent.tagName !== 'PICTURE') {
return;
}
for (var i = 0; i < parent.children.length; i++) {
var pictureChild = parent.children[i];
if (pictureChild.tagName === 'SOURCE') {
var sourceSrcset = pictureChild.getAttribute('data-' + srcsetDataAttribute);
if (sourceSrcset) {
pictureChild.setAttribute('srcset', sourceSrcset);
}
}
}
}
function _setSources(element, srcsetDataAttribute, srcDataAttribute) {
var tagName = element.tagName;
var elementSrc = element.getAttribute('data-' + srcDataAttribute);
if (tagName === "IMG") {
if (srcSet) target.setAttribute("srcset", srcSet);
if (src) target.setAttribute("src", src);
_setSourcesForPicture(element, srcsetDataAttribute);
var imgSrcset = element.getAttribute('data-' + srcsetDataAttribute);
if (imgSrcset) element.setAttribute("srcset", imgSrcset);
if (elementSrc) element.setAttribute("src", elementSrc);
return;
}
if (tagName === "IFRAME") {
if (src) target.setAttribute("src", src);
if (elementSrc) element.setAttribute("src", elementSrc);
return;
}
target.style.backgroundImage = "url(" + src + ")";
element.style.backgroundImage = "url(" + elementSrc + ")";
}

@@ -253,43 +268,2 @@

LazyLoad.prototype._showOnLoad = function(element) {
var fakeImg,
settings = this._settings;
/* If no src attribute given use data:uri. */
if (!element.getAttribute("src")) {
element.setAttribute("src", settings.placeholder);
}
/* Creating a new `img` in a DOM fragment. */
fakeImg = document.createElement('img');
/* Listening to the load event */
function loadCallback() {
/* As this method is asynchronous, it must be protected against external destroy() calls */
if (settings === null) {
return;
}
/* Calling LOAD callback */
if (settings.callback_load) {
settings.callback_load(element);
}
_setSources(element, element, settings.data_srcset, settings.data_src);
/* Calling SET callback */
if (settings.callback_set) {
settings.callback_set(element);
}
_removeClass(element, settings.class_loading);
_addClass(element, settings.class_loaded);
_removeEventListener(fakeImg, "load", loadCallback);
}
_addEventListener(fakeImg, "load", loadCallback);
_addEventListener(fakeImg, "error", function () {
_removeClass(element, settings.class_loading);
if (settings.callback_error) {
settings.callback_error(element);
}
});
_addClass(element, settings.class_loading);
_setSources(fakeImg, element, settings.data_srcset, settings.data_src);
};
LazyLoad.prototype._showOnAppear = function(element) {

@@ -324,3 +298,3 @@ var settings = this._settings;

_setSources(element, element, settings.data_srcset, settings.data_src);
_setSources(element, settings.data_srcset, settings.data_src);
/* Calling SET callback */

@@ -346,8 +320,4 @@ if (settings.callback_set) {

if (_isInsideViewport(element, settings.container, settings.threshold)) {
/* Forking behaviour depending on show_while_loading (true value is ideal for progressive jpeg). */
if (settings.show_while_loading) {
this._showOnAppear(element);
} else {
this._showOnLoad(element);
}
this._showOnAppear(element);
/* Marking the element as processed. */

@@ -354,0 +324,0 @@ processedIndexes.push(i);

0

todo.md

@@ -0,0 +0,0 @@ TODO

0

typings/lazyload.d.ts

@@ -0,0 +0,0 @@ interface ILazyLoadOptions {

.gitattributes

Sorry, the diff of this file is not supported yet

.npmignore

Sorry, the diff of this file is not supported yet

demos/background_images.html

Sorry, the diff of this file is not supported yet

demos/destroy.html

Sorry, the diff of this file is not supported yet

demos/dynamic_content.html

Sorry, the diff of this file is not supported yet

demos/iframes.html

Sorry, the diff of this file is not supported yet

demos/iframes/i01.html

Sorry, the diff of this file is not supported yet

demos/iframes/i02.html

Sorry, the diff of this file is not supported yet

demos/iframes/i03.html

Sorry, the diff of this file is not supported yet

demos/multiple_container.html

Sorry, the diff of this file is not supported yet

demos/perf/with_jQuery_lazyLoad.html

Sorry, the diff of this file is not supported yet

demos/perf/with_lazyLoad.html

Sorry, the diff of this file is not supported yet

demos/simple.html

Sorry, the diff of this file is not supported yet

demos/single_container.html

Sorry, the diff of this file is not supported yet

demos/with_srcset_sizes.html

Sorry, the diff of this file is not supported yet

demos/with_srcset.html

Sorry, the diff of this file is not supported yet

dist/lazyload.min.js.map

Sorry, the diff of this file is not supported yet

index.html

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc