lousy-load - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

dist/lousy-load.js

@@ -19,5 +19,3 @@ 'use strict';
 
-    if (typeof define === 'function' && define.amd) {
-        define([], factory(pluginName));
-    } else if ((typeof exports === 'undefined' ? 'undefined' : _typeof(exports)) === 'object') {
+    if ((typeof exports === 'undefined' ? 'undefined' : _typeof(exports)) === 'object') {
         module.exports = factory(pluginName);
@@ -24,0 +22,0 @@ } else {

dist/lousy-load.min.js

@@ -1,1 +0,1 @@
-"use strict";function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var _createClass=function(){function e(e,t){for(var i=0;i<t.length;i++){var n=t[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,i,n){return i&&e(t.prototype,i),n&&e(t,n),t}}(),_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};!function(e,t){"function"==typeof define&&define.amd?define([],t("lousyLoad")):"object"===("undefined"==typeof exports?"undefined":_typeof(exports))?module.exports=t("lousyLoad"):e.lousyLoad=t("lousyLoad")}(window,function(e){var t={immediate:!0,selector:"img",threshold:0,wrapElement:!0},i=function(e,t){var i={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(i[n]=e[n]);for(var a in t)Object.prototype.hasOwnProperty.call(t,a)&&(i[a]=t[a]);return i};window.NodeList&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=function(e,t){t=t||window;for(var i=0;i<this.length;i++)e.call(t,this[i],i,this)});var n=function(){function e(t){_classCallCheck(this,e),this.__data={},this.__element=t}return _createClass(e,[{key:"data",value:function(e,t){return e?t?void(this.__data[e]=t):this.__data[e]:this.__data}},{key:"el",get:function(){return this.__element}}]),e}(),a=function(){function a(n,r){_classCallCheck(this,a),this.element=n,this._defaults=t,this._name=e,this.options=i(t,r),this.options.immediate&&this.init()}return _createClass(a,[{key:"init",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return this.$images=this.__getImages(),this.$images.forEach(this.prepareImage.bind(this)),e.isReinit||(window.onresize=this.__debounce(this.__resizeHandler.bind(this),50)),this.$images}},{key:"prepareImage",value:function(e){var t=new n(e),i=t.el,a=(Math.max(document.documentElement.clientHeight,window.innerHeight||0),this.__getImageDimensions(i)),r=null===i.getAttribute("data-nowrap")&&this.options.wrapElement,o=void 0;i.getAttribute("style")&&i.setAttribute("data-ogStyles",i.getAttribute("style")),t.data("shouldWrap",r),r&&((o=document.createElement("span")).classList.add("ll-image_wrapper"),o.style.width=a.width+"px",o.style.height=a.height+"px",o.style.display="inline-block",i.classList.add("ll-image"),i.style.width=a.width+"px",i.style.height=a.height+"px",this.__wrapElement(o,i),t.data("wrapper",o));var s=this.tryLoadImage(t),l=this.__debounce(function(){this.tryLoadImage(t)&&window.removeEventListener("scroll",l)}.bind(this),50);return s||window.addEventListener("scroll",l),t}},{key:"tryLoadImage",value:function(e,t){var i=Math.max(document.documentElement.clientHeight,window.innerHeight||0),n=e.el,a=void 0;return!((t||n.getBoundingClientRect().top)>i+this.options.threshold)&&(a="IMG"!==n.nodeName?"background":n.getAttribute("data-srcset")?"srcset":"src",e.data("type",a),this.__loadImageByType(e,a),!0)}},{key:"__getImages",value:function(){return this.element.querySelectorAll(this.options.selector)}},{key:"__debounce",value:function(e,t,i){var n=void 0;return function(){var a=this,r=arguments,o=i&&!n;clearTimeout(n),n=setTimeout(function(){n=null,i||e.apply(a,r)},t),o&&e.apply(a,r)}}},{key:"__wrapElement",value:function(e,t){t.length||(t=[t]);for(var i=t.length-1;i>=0;i--){var n=i>0?e.cloneNode(!0):e,a=t[i],r=a.parentNode,o=a.nextSibling;n.appendChild(a),o?r.insertBefore(n,o):r.appendChild(n)}}},{key:"__unwrapElement",value:function(e){var t=e.parentNode,i=t.parentNode;if(t.classList.contains("ll-image_wrapper")){for(;t.firstChild;)i.insertBefore(t.firstChild,t);i.removeChild(t)}}},{key:"__getImageDimensions",value:function(e){var t=window.getComputedStyle(e),i="IMG"===e.nodeName?Number(e.getAttribute("width")):e.offsetWidth,n="IMG"===e.nodeName?Number(e.getAttribute("height")):e.offsetHeight,a="none"===t.getPropertyValue("max-width")?null:t.getPropertyValue("max-width"),r=i/n;if(a){if(a.indexOf("%")>-1){var o=Number(a.replace("%",""))/100,s=window.getComputedStyle(e.parentElement).getPropertyValue("width");a=Number(s.replace("px",""))*o}else a.indexOf("px")>-1&&(a=Number(a.replace("px","")));Number(i)>Number(a)&&(i=a,n=a/r)}else a=i;return{width:i,height:n,maxWidth:a,aspectRatio:r}}},{key:"__attachLoadEvent",value:function(e,t,i){function n(){a.classList.add("is-loaded"),i&&t.classList.add("is-loaded")}var a=e.el;if(t=t||e.data("wrapper"),i=i||e.data("shouldWrap"),"IMG"!==a.nodeName){var r=window.getComputedStyle(a).getPropertyValue("background-image").match(/url\(['"]?([^'"]*)['"]?\)/)[1],o=new Image;o.onload=n.bind(this),o.src=r,o.complete&&n()}else a.onload=n.bind(this)}},{key:"__loadImageByType",value:function(e,t){var i=e.el;switch(t){case"srcset":i.srcset=i.getAttribute("data-srcset"),i.src=i.getAttribute("data-src");break;case"background":this.options.backgroundClass?i.classList.remove(this.options.backgroundClass.replace(/^\./,"")):i.style.removeProperty("background");break;default:i.src=i.getAttribute("data-src")}this.__attachLoadEvent(e)}},{key:"__resizeHandler",value:function(){var e=this;this.__getImages().forEach(function(t){t.getAttribute("data-ogStyles")?t.setAttribute("style",t.getAttribute("data-ogStyles")):t.removeAttribute("style"),null===t.getAttribute("data-nowrap")&&e.options.wrapElement&&e.__unwrapElement(t)}),this.init({isReinit:!0})}}]),a}();if(window.jQuery){var r=window.jQuery;r.fn[e]=function(t){return t=t||{},this.each(function(){r.data(this,"plugin_"+e)||(t.element=this,r.data(this,"plugin_"+e,new a(this,t)))})}}return a});
+"use strict";function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var _createClass=function(){function e(e,t){for(var i=0;i<t.length;i++){var n=t[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,i,n){return i&&e(t.prototype,i),n&&e(t,n),t}}(),_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};!function(e,t){"object"===("undefined"==typeof exports?"undefined":_typeof(exports))?module.exports=t("lousyLoad"):e.lousyLoad=t("lousyLoad")}(window,function(e){var t={immediate:!0,selector:"img",threshold:0,wrapElement:!0},i=function(e,t){var i={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&(i[n]=e[n]);for(var a in t)Object.prototype.hasOwnProperty.call(t,a)&&(i[a]=t[a]);return i};window.NodeList&&!NodeList.prototype.forEach&&(NodeList.prototype.forEach=function(e,t){t=t||window;for(var i=0;i<this.length;i++)e.call(t,this[i],i,this)});var n=function(){function e(t){_classCallCheck(this,e),this.__data={},this.__element=t}return _createClass(e,[{key:"data",value:function(e,t){return e?t?void(this.__data[e]=t):this.__data[e]:this.__data}},{key:"el",get:function(){return this.__element}}]),e}(),a=function(){function a(n,r){_classCallCheck(this,a),this.element=n,this._defaults=t,this._name=e,this.options=i(t,r),this.options.immediate&&this.init()}return _createClass(a,[{key:"init",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return this.$images=this.__getImages(),this.$images.forEach(this.prepareImage.bind(this)),e.isReinit||(window.onresize=this.__debounce(this.__resizeHandler.bind(this),50)),this.$images}},{key:"prepareImage",value:function(e){var t=new n(e),i=t.el,a=(Math.max(document.documentElement.clientHeight,window.innerHeight||0),this.__getImageDimensions(i)),r=null===i.getAttribute("data-nowrap")&&this.options.wrapElement,o=void 0;i.getAttribute("style")&&i.setAttribute("data-ogStyles",i.getAttribute("style")),t.data("shouldWrap",r),r&&((o=document.createElement("span")).classList.add("ll-image_wrapper"),o.style.width=a.width+"px",o.style.height=a.height+"px",o.style.display="inline-block",i.classList.add("ll-image"),i.style.width=a.width+"px",i.style.height=a.height+"px",this.__wrapElement(o,i),t.data("wrapper",o));var s=this.tryLoadImage(t),l=this.__debounce(function(){this.tryLoadImage(t)&&window.removeEventListener("scroll",l)}.bind(this),50);return s||window.addEventListener("scroll",l),t}},{key:"tryLoadImage",value:function(e,t){var i=Math.max(document.documentElement.clientHeight,window.innerHeight||0),n=e.el,a=void 0;return!((t||n.getBoundingClientRect().top)>i+this.options.threshold)&&(a="IMG"!==n.nodeName?"background":n.getAttribute("data-srcset")?"srcset":"src",e.data("type",a),this.__loadImageByType(e,a),!0)}},{key:"__getImages",value:function(){return this.element.querySelectorAll(this.options.selector)}},{key:"__debounce",value:function(e,t,i){var n=void 0;return function(){var a=this,r=arguments,o=i&&!n;clearTimeout(n),n=setTimeout(function(){n=null,i||e.apply(a,r)},t),o&&e.apply(a,r)}}},{key:"__wrapElement",value:function(e,t){t.length||(t=[t]);for(var i=t.length-1;i>=0;i--){var n=i>0?e.cloneNode(!0):e,a=t[i],r=a.parentNode,o=a.nextSibling;n.appendChild(a),o?r.insertBefore(n,o):r.appendChild(n)}}},{key:"__unwrapElement",value:function(e){var t=e.parentNode,i=t.parentNode;if(t.classList.contains("ll-image_wrapper")){for(;t.firstChild;)i.insertBefore(t.firstChild,t);i.removeChild(t)}}},{key:"__getImageDimensions",value:function(e){var t=window.getComputedStyle(e),i="IMG"===e.nodeName?Number(e.getAttribute("width")):e.offsetWidth,n="IMG"===e.nodeName?Number(e.getAttribute("height")):e.offsetHeight,a="none"===t.getPropertyValue("max-width")?null:t.getPropertyValue("max-width"),r=i/n;if(a){if(a.indexOf("%")>-1){var o=Number(a.replace("%",""))/100,s=window.getComputedStyle(e.parentElement).getPropertyValue("width");a=Number(s.replace("px",""))*o}else a.indexOf("px")>-1&&(a=Number(a.replace("px","")));Number(i)>Number(a)&&(i=a,n=a/r)}else a=i;return{width:i,height:n,maxWidth:a,aspectRatio:r}}},{key:"__attachLoadEvent",value:function(e,t,i){function n(){a.classList.add("is-loaded"),i&&t.classList.add("is-loaded")}var a=e.el;if(t=t||e.data("wrapper"),i=i||e.data("shouldWrap"),"IMG"!==a.nodeName){var r=window.getComputedStyle(a).getPropertyValue("background-image").match(/url\(['"]?([^'"]*)['"]?\)/)[1],o=new Image;o.onload=n.bind(this),o.src=r,o.complete&&n()}else a.onload=n.bind(this)}},{key:"__loadImageByType",value:function(e,t){var i=e.el;switch(t){case"srcset":i.srcset=i.getAttribute("data-srcset"),i.src=i.getAttribute("data-src");break;case"background":this.options.backgroundClass?i.classList.remove(this.options.backgroundClass.replace(/^\./,"")):i.style.removeProperty("background");break;default:i.src=i.getAttribute("data-src")}this.__attachLoadEvent(e)}},{key:"__resizeHandler",value:function(){var e=this;this.__getImages().forEach(function(t){t.getAttribute("data-ogStyles")?t.setAttribute("style",t.getAttribute("data-ogStyles")):t.removeAttribute("style"),null===t.getAttribute("data-nowrap")&&e.options.wrapElement&&e.__unwrapElement(t)}),this.init({isReinit:!0})}}]),a}();if(window.jQuery){var r=window.jQuery;r.fn[e]=function(t){return t=t||{},this.each(function(){r.data(this,"plugin_"+e)||(t.element=this,r.data(this,"plugin_"+e,new a(this,t)))})}}return a});

lousy-load.js

@@ -11,5 +11,3 @@ /*!
 
-    if (typeof define === 'function' && define.amd) {
-        define([], factory(pluginName));
-    } else if (typeof exports === 'object') {
+    if (typeof exports === 'object') {
         module.exports = factory(pluginName);
@@ -16,0 +14,0 @@ } else {

package.json

 {
   "name": "lousy-load",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "JavaScript lazy load plugin with responsive image support",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -22,3 +22,3 @@ # Lousy Load
 ```html
-<img data-src="path/to/image.jpg">
+<img data-src="path/to/image.jpg" width="400" height="300">
         
@@ -33,3 +33,3 @@ <script src="lousy-load.min.js"></script>
 ```html
-<img data-src="path/to/image.jpg">
+<img data-src="path/to/image.jpg" width="400" height="300">
         
@@ -48,3 +48,5 @@ <script src="lousy-load.min.js"></script>
     class="ll-image"
-    data-src="path/to/image.jpg">
+    data-src="path/to/image.jpg"
+     width="400"
+     height="300">
 
@@ -54,3 +56,5 @@ <img
     class="ll-image"
-    data-src="path/to/image2.jpg">
+    data-src="path/to/image2.jpg"
+    width="400"
+    height="300">
         
@@ -57,0 +61,0 @@ <script src="lousy-load.min.js"></script>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

90

increased by4.65%

Worsened metrics

Total package byte prevSize

404076

decreased by-0.13%

Lines of code

6007

decreased by-0.07%

No dependency changes