framework7/components/lazy.js

Full featured mobile HTML framework for building iOS & Android apps

(function framework7ComponentLoader(e,a){void 0===a&&(a=!0);document;var t=window,r=e.$,s=(e.Template7,e.utils),n=(e.device,e.support),o=(e.Class,e.Modal,e.ConstructorMethods,e.ModalMethods,{destroy:function(e){var a=r(e).closest(".page");a.length&&a[0].f7LazyDestroy&&a[0].f7LazyDestroy()},create:function(e){var a=this,s=r(e).closest(".page").eq(0),o=s.find(".lazy");if(0!==o.length||s.hasClass("lazy")){var l=a.params.lazy.placeholder;!1!==l&&o.each((function(e,a){r(a).attr("data-src")&&!r(a).attr("src")&&r(a).attr("src",l)}));var i=[],d=!1;if(a.params.lazy.observer&&n.intersectionObserver){var c=s[0].f7LazyObserver;return c||(c=new t.IntersectionObserver((function(e,t){e.forEach((function(e){if(e.isIntersecting){if(a.params.lazy.sequential&&d)return void(i.indexOf(e.target)<0&&i.push(e.target));d=!0,a.lazy.loadImage(e.target,y),t.unobserve(e.target)}}))}),{root:s[0]})),o.each((function(e,a){a.f7LazyObserverAdded||(a.f7LazyObserverAdded=!0,c.observe(a))})),void(s[0].f7LazyDestroy||(s[0].f7LazyDestroy=function(){c.disconnect(),delete s[0].f7LazyDestroy,delete s[0].f7LazyObserver}))}s[0].f7LazyDestroy||(s[0].f7LazyDestroy=function(){s[0].f7LazyAttached=!1,delete s[0].f7LazyAttached,s.off("lazy",f),s.off("scroll",f,!0),s.find(".tab").off("tab:mounted tab:show",f),a.off("resize",f)}),s[0].f7LazyAttached||(s[0].f7LazyAttached=!0,s.on("lazy",f),s.on("scroll",f,!0),s.find(".tab").on("tab:mounted tab:show",f),a.on("resize",f)),f()}function y(e){i.indexOf(e)>=0&&i.splice(i.indexOf(e),1),d=!1,a.params.lazy.sequential&&i.length>0&&(d=!0,a.lazy.loadImage(i[0],y))}function f(){a.lazy.load(s,(function(e){a.params.lazy.sequential&&d?i.indexOf(e)<0&&i.push(e):(d=!0,a.lazy.loadImage(e,y))}))}},isInViewport:function(e){var a=e.getBoundingClientRect(),t=this.params.lazy.threshold||0;return a.top>=0-t&&a.left>=0-t&&a.top<=this.height+t&&a.left<=this.width+t},loadImage:function(e,a){var s=this,n=r(e),o=n.attr("data-background"),l=o||n.attr("data-src");if(l){var i=new t.Image;i.onload=function(){n.removeClass("lazy").addClass("lazy-loaded"),o?n.css("background-image","url("+l+")"):n.attr("src",l),a&&a(e),n.trigger("lazy:loaded"),s.emit("lazyLoaded",n[0])},i.onerror=function(){n.removeClass("lazy").addClass("lazy-loaded"),o?n.css("background-image","url("+(s.params.lazy.placeholder||"")+")"):n.attr("src",s.params.lazy.placeholder||""),a&&a(e),n.trigger("lazy:error"),s.emit("lazyError",n[0])},i.src=l,n.removeAttr("data-src").removeAttr("data-background"),n.trigger("lazy:load"),s.emit("lazyLoad",n[0])}},load:function(e,a){var t=this,s=r(e);s.hasClass("page")||(s=s.parents(".page").eq(0)),0!==s.length&&s.find(".lazy").each((function(e,s){r(s).parents(".tab:not(.tab-active)").length>0||t.lazy.isInViewport(s)&&(a?a(s):t.lazy.loadImage(s))}))}}),l={name:"lazy",params:{lazy:{placeholder:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEXCwsK592mkAAAACklEQVQI12NgAAAAAgAB4iG8MwAAAABJRU5ErkJggg==",threshold:0,sequential:!0,observer:!0}},create:function(){s.extend(this,{lazy:{create:o.create.bind(this),destroy:o.destroy.bind(this),loadImage:o.loadImage.bind(this),load:o.load.bind(this),isInViewport:o.isInViewport.bind(this)}})},on:{pageInit:function(e){(e.$el.find(".lazy").length>0||e.$el.hasClass("lazy"))&&this.lazy.create(e.$el)},pageAfterIn:function(e){this.params.lazy.observer&&n.intersectionObserver||(e.$el.find(".lazy").length>0||e.$el.hasClass("lazy"))&&this.lazy.create(e.$el)},pageBeforeRemove:function(e){(e.$el.find(".lazy").length>0||e.$el.hasClass("lazy"))&&this.lazy.destroy(e.$el)},tabMounted:function(e){var a=r(e);(a.find(".lazy").length>0||a.hasClass("lazy"))&&this.lazy.create(a)},tabBeforeRemove:function(e){if(!this.params.lazy.observer||!n.intersectionObserver){var a=r(e);(a.find(".lazy").length>0||a.hasClass("lazy"))&&this.lazy.destroy(a)}}}};if(a){if(e.prototype.modules&&e.prototype.modules[l.name])return;e.use(l),e.instance&&(e.instance.useModuleParams(l,e.instance.params),e.instance.useModule(l))}return l}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))