framework7/components/lazy.js

Full featured mobile HTML framework for building iOS & Android apps

(function framework7ComponentLoader(a,e){void 0===e&&(e=!0);var t=window,r=a.$,s=(a.Template7,a.utils),n=(a.device,a.support),o=(a.Class,a.Modal,a.ConstructorMethods,a.ModalMethods,{destroy:function(a){var e=r(a).closest(".page");e.length&&e[0].f7LazyDestroy&&e[0].f7LazyDestroy()},create:function(a){var e=this,s=r(a).closest(".page").eq(0),o=s.find(".lazy");if(0!==o.length||s.hasClass("lazy")){var l=e.params.lazy.placeholder;!1!==l&&o.each(function(a,e){r(e).attr("data-src")&&!r(e).attr("src")&&r(e).attr("src",l)});var i=[],d=!1;if(e.params.lazy.observer&&n.intersectionObserver){var y=s[0].f7LazyObserver;return y||(y=new t.IntersectionObserver(function(a,t){a.forEach(function(a){if(a.isIntersecting){if(e.params.lazy.sequential&&d)return void(i.indexOf(a.target)<0&&i.push(a.target));d=!0,e.lazy.loadImage(a.target,c),t.unobserve(a.target)}})},{root:s[0]})),o.each(function(a,e){e.f7LazyObserverAdded||(e.f7LazyObserverAdded=!0,y.observe(e))}),void(s[0].f7LazyDestroy||(s[0].f7LazyDestroy=function(){y.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),e.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),e.on("resize",f)),f()}function c(a){i.indexOf(a)>=0&&i.splice(i.indexOf(a),1),d=!1,e.params.lazy.sequential&&i.length>0&&(d=!0,e.lazy.loadImage(i[0],c))}function f(){e.lazy.load(s,function(a){e.params.lazy.sequential&&d?i.indexOf(a)<0&&i.push(a):(d=!0,e.lazy.loadImage(a,c))})}},isInViewport:function(a){var e=a.getBoundingClientRect(),t=this.params.lazy.threshold||0;return e.top>=0-t&&e.left>=0-t&&e.top<=this.height+t&&e.left<=this.width+t},loadImage:function(a,e){var s=this,n=r(a),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),e&&e(a),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||""),e&&e(a),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(a,e){var t=this,s=r(a);s.hasClass("page")||(s=s.parents(".page").eq(0)),0!==s.length&&s.find(".lazy").each(function(a,s){r(s).parents(".tab:not(.tab-active)").length>0||t.lazy.isInViewport(s)&&(e?e(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(a){(a.$el.find(".lazy").length>0||a.$el.hasClass("lazy"))&&this.lazy.create(a.$el)},pageAfterIn:function(a){this.params.lazy.observer&&n.intersectionObserver||(a.$el.find(".lazy").length>0||a.$el.hasClass("lazy"))&&this.lazy.create(a.$el)},pageBeforeRemove:function(a){(a.$el.find(".lazy").length>0||a.$el.hasClass("lazy"))&&this.lazy.destroy(a.$el)},tabMounted:function(a){var e=r(a);(e.find(".lazy").length>0||e.hasClass("lazy"))&&this.lazy.create(e)},tabBeforeRemove:function(a){if(!this.params.lazy.observer||!n.intersectionObserver){var e=r(a);(e.find(".lazy").length>0||e.hasClass("lazy"))&&this.lazy.destroy(e)}}}};if(e){if(a.prototype.modules&&a.prototype.modules[l.name])return;a.use(l),a.instance&&(a.instance.useModuleParams(l,a.instance.params),a.instance.useModule(l))}return l}(Framework7, typeof Framework7AutoInstallComponent === 'undefined' ? undefined : Framework7AutoInstallComponent))