mirror of https://github.com/IoTcat/ushio-img.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 lines
2.2 KiB
1 lines
2.2 KiB
"use strict";function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _defineProperties(e,t){for(var a=0;a<t.length;a++){var n=t[a];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}function _createClass(e,t,a){return t&&_defineProperties(e.prototype,t),a&&_defineProperties(e,a),e}var LazyLoadImg=function(){function n(e){_classCallCheck(this,n);var t={selector:".lazy-img",virtualSrc:"",callback:null};for(var a in t)t.hasOwnProperty(a)&&!e.hasOwnProperty(a)&&(e[a]=t[a]);this.options=e,this.images=[].slice.call(document.querySelectorAll(e.selector)),this.init()}return _createClass(n,[{key:"init",value:function(){var a=this;if(window.IntersectionObserver){this.observer=new IntersectionObserver(function(e){e.forEach(function(e){if(0<e.intersectionRatio){a.observer.unobserve(e.target);var t=e.target;a.loadImage(t)}})},{root:null,rootMargin:"0px",threshold:[0]}),this.images.forEach(function(e){a.observer.observe(e)})}else document.addEventListener("scroll",function(){a.LazyLoadImage()})}},{key:"LazyLoadImage",value:function(){var t=this,a=window.innerHeight;this.images.forEach(function(e){e.getBoundingClientRect().top<=a&&t.loadImage(e)})}},{key:"loadImages",value:function(){var t=this;this.images.forEach(function(e){t.loadImage(e)})}},{key:"loadImage",value:function(e){var t=e.getAttribute(this.options.virtualSrc);this.options.callback?this.options.callback(e,t):"img"===e.tagName.toLowerCase()?t&&(e.src=t):e.style.backgroundImage="url(".concat(t,")")}},{key:"loadAndDestroy",value:function(){this.loadImages(),this.destroy()}},{key:"destroy",value:function(){this.observer.disconnect(),this.settings=null}}]),n}();new LazyLoadImg({selector:".lazy-loader",virtualSrc:"lazy-src",callback:function(t,a){var e=new Image;e.src=a,e.onload=function(){var e=t.getAttribute("data").split("::");if(e.length<2)return t.classList.remove("lazy-loader"),void(t.innerHTML="<img src=".concat(a," alt=''/>"));2<e.length&&(t.classList.remove("lazy-loader"),t.innerHTML="<img src=".concat(a,' style="width:').concat(e[0],"px;height:").concat(e[1],'px" alt="').concat(e[2],'" />'))}}}); |