diff --git a/angular-lazy-img.js b/angular-lazy-img.js index e69de29..efa6ba3 100644 --- a/angular-lazy-img.js +++ b/angular-lazy-img.js @@ -0,0 +1,106 @@ +angular.module('angularLazyImg', []); + +angular.module('angularLazyImg', []).factory('LazyImgMagic', [ + '$window', '$document', 'lazyImgConfig', function(lazyImgConfig){ + 'use strict'; + + var winWidth, winHeight, images, count, isListening, options; + var checkImagesT, saveWinOffsetT; + + images = []; + isListening = false; + options = lazyImgConfig.getOptions(); + + function saveWinOffset(){ + winHeight = window.innerHeight; + winWidth = window.innerWidth; + } + + // http://remysharp.com/2010/07/21/throttling-function-calls/ + function throttle(fn, threshhold, scope) { + var last, deferTimer; + return function () { + var context = scope || this; + var now = +new Date, + args = arguments; + if (last && now < last + threshhold) { + clearTimeout(deferTimer); + deferTimer = setTimeout(function () { + last = now; + fn.apply(context, args); + }, threshhold); + } else { + last = now; + fn.apply(context, args); + } + }; + } + + checkImagesT = throttle(checkImages, 25); + saveWinOffsetT = throttle(saveWinOffset, 50); + saveWinOffset(); + + function listen(param){ + lazyImgConfig.win[param]('scroll', checkImagesT); + lazyImgConfig.win[param]('resize', checkImagesT); + lazyImgConfig.win[param]('resize', saveWinOffsetT); + } + + function startListenig(){ + isListening = true; + setTimeout(function(){ checkImages(); }, 1); + listen('on'); + } + + function stopListenig(){ + isListening = false; + listen('off'); + } + + function checkImages() { + for(var i = 0; i < count; i++){ + var image = images[i]; + if(isElementInView(image)) { + loadImage(image); + images.splice(i, 1); + count--; + i--; + } + } + if(count === 0) stopListening(); + } + + function loadImage(photo){ + if(photo.elem.offsetWidth > 0 && photo.elem.offsetHeight > 0) { + var img = new Image(); + img.onerror = function() { + if(photo.onError) photo.onError(); + photo.elem.addClass(options.errorClass); + }; + img.onload = function() { + setPhotoSrc(photo.elem, photo.src); + photo.addClass(options.successClass); + if(photo.success) photo.success(); + }; + img.src = photo.src; + } + } + + function setPhotoSrc($elem, src){ + var isImage = $elem.nodeName.toLowerCase() === 'img'; + isImage ? $elem.src = src : $elem.css('background-image', 'url("' + src + '")'); + } + + function isElementInView(ele) { + var rect = ele.getBoundingClientRect(); + var bottomline = winHeight + options.offset; + return ( + rect.left >= 0 && rect.right <= winWidth + options.offset && ( + rect.top >= 0 && rect.top <= bottomline || + rect.bottom <= bottomline && rect.bottom >= 0 - options.offset + ) + ); + } + + } +]); \ No newline at end of file