late-images
Version:
Lightweight javascript library to lazy load images as enter viewport
2 lines • 5.12 kB
JavaScript
!function(a,b){"function"==typeof define&&define.amd?define([],b):"object"==typeof module&&module.exports?module.exports=b():a.WhenInViewport=b()}(this,function(){function a(a,b,c){j.setup(),this.registryItem=i.addItem(a,"function"==typeof b?f(c||{},{callback:b}):b),i.processItem(this.registryItem)}function b(){return"innerHeight"in window?window.innerHeight:document.documentElement.offsetHeight}function c(){return"pageYOffset"in window?window.pageYOffset:document.documentElement.scrollTop||document.body.scrollTop}function d(a){return a.getBoundingClientRect().top+c()}function e(a,b,c){for(var d in a)if(a.hasOwnProperty(d)&&b.call(c,a[d],d)===!1)break}function f(a){for(var b=1;b<arguments.length;b++)e(arguments[b],function(b,c){a[c]=b});return a}var g,h;a.prototype.stopListening=function(){i.removeItem(this.registryItem),j.removeIfStoreEmpty()},a.defaults={threshold:0,context:null},f(a,{setRateLimiter:function(a,b){return j.rateLimiter=a,b&&(j.rateLimitDelay=b),this},checkAll:function(){return h=c(),g=b(),i.adjustPositions(i.processItem),j.removeIfStoreEmpty(),this},destroy:function(){return i.store={},j.remove(),delete j.scrollHandler,delete j.resizeHandler,this},registerAsJqueryPlugin:function(b){return b.fn.whenInViewport=function(c,d){var e,f=function(a){return function(c){a.call(this,b(c))}};return e="function"==typeof c?b.extend({},d,{callback:f(c)}):b.extend(c,{callback:f(c.callback)}),this.each(function(){e.setupOnce?!b.data(this,"whenInViewport")&&b.data(this,"whenInViewport",new a(this,e)):b.data(this,"whenInViewport",new a(this,e))})},this}});var i={store:{},counter:0,addItem:function(b,c){var e="whenInViewport"+ ++this.counter,g=f({},a.defaults,c,{storeKey:e,element:b,topOffset:d(b)});return this.store[e]=g},adjustPositions:function(a){e(this.store,function(b){b.topOffset=d(b.element),a&&a.call(i,b)})},processAll:function(){e(this.store,this.processItem,this)},processItem:function(a){h+g>=a.topOffset-a.threshold&&(this.removeItem(a),a.callback.call(a.context||window,a.element))},removeItem:function(a){delete this.store[a.storeKey]},isEmpty:function(){var a=!0;return e(this.store,function(){return a=!1}),a}},j={setuped:!1,rateLimiter:function(a,b){return a},rateLimitDelay:100,on:function(a,b){return window.addEventListener?window.addEventListener(a,b,!1):window.attachEvent&&window.attachEvent(a,b),this},off:function(a,b){return window.removeEventListener?window.removeEventListener(a,b,!1):window.detachEvent&&window.detachEvent("on"+a,b),this},setup:function(){var a=this;this.setuped||(h=c(),g=b(),this.scrollHandler=this.scrollHandler||this.rateLimiter(function(){h=c(),i.processAll(),a.removeIfStoreEmpty()},this.rateLimitDelay),this.resizeHandler=this.resizeHandler||this.rateLimiter(function(){g=b(),i.adjustPositions(i.processItem),a.removeIfStoreEmpty()},this.rateLimitDelay),this.on("scroll",this.scrollHandler).on("resize",this.resizeHandler),this.setuped=!0)},removeIfStoreEmpty:function(){i.isEmpty()&&this.remove()},remove:function(){this.setuped&&(this.off("scroll",this.scrollHandler).off("resize",this.resizeHandler),this.setuped=!1)}},k=window.jQuery||window.$;return k&&a.registerAsJqueryPlugin(k),a});
!function(a,b){"function"==typeof define&&define.amd?define(["when-in-viewport"],b):"object"==typeof module&&module.exports?module.exports=b(require("when-in-viewport")):a.LateImage=b(a.WhenInViewport)}(this,function(a){function b(d,f){this.el=d,f=e({},b.defaults,f,{context:this}),f.enableViewportCheck?this.inViewportListener=new a(d,function(){c(d,f)},{threshold:f.threshold}):c(d,f)}function c(a,b){var c=a.getAttribute(b.srcAttribute);b.loadingCallback&&b.loadingCallback(a,b.context),h(a,b.loadingClass,!0),d(c,function(d){a.setAttribute("src",c),h(a,b.loadingClass,!1),h(a,b.loadedClass,!0),a.getAttribute(b.altAttribute)&&a.setAttribute("alt",a.getAttribute(b.altAttribute)),b.doneCallback&&b.doneCallback(a,d,b.context)},function(c){h(a,b.loadingClass,!1),h(a,b.errorClass,!0),b.failCallback&&b.failCallback(a,c,b.context)})}function d(a,b,c){var d=new Image;d.onload=b,d.onerror=c,d.src=a}function e(a){for(var b=1;b<arguments.length;b++){var c=arguments[b];if(c)for(var d in c)c.hasOwnProperty(d)&&void 0!==c[d]&&(a[d]=c[d])}return a}function f(a,b){for(var c=0;c<a.length;c++)b(a[c],c)}function g(a){var b=[];return f(a,function(a){a&&b.push(a)}),b}function h(a,c,d){if(b.toggleClass)return b.toggleClass(a,c,d);var e=g((a.className||"").split(" ")),h=g(c.split(" ")),i=[];f(d?h:e,function(a){(d?e:h).indexOf(a)<0&&i.push(a)}),a.setAttribute("class",i.join(" "))}b.defaults={srcAttribute:"data-src",altAttribute:"data-alt",loadingCallback:null,doneCallback:null,failCallback:null,threshold:0,loadingClass:"lateImageLoading",loadedClass:"lateImageLoaded",errorClass:"lateImageError",enableViewportCheck:!0},b.prototype.destroy=function(){this.inViewportListener&&this.inViewportListener.stopListening()},b.registerAsJqueryPlugin=function(a){a.fn.lateImages=function(c){return this.each(function(){a.data(this,"lateImage")||a.data(this,"lateImage",new b(this,c))})}};var i=window.jQuery||window.$;return i&&b.registerAsJqueryPlugin(i),b});