(function ($) { })(jQuery); /** * jQuery Unveil * A very lightweight jQuery plugin to lazy load images * http://luis-almeida.github.com/unveil * * Licensed under the MIT license. * Copyright 2013 Luís Almeida * https://github.com/luis-almeida */ (function ($) { /** * Copyright 2012, Digital Fusion * Licensed under the MIT license. * http://teamdf.com/jquery-plugins/license/ * * @author Sam Sehnert * @desc A small plugin that checks whether elements are within * the user visible viewport of a web browser. * only accounts for vertical position, not horizontal. */ var $w = $(window); function visibleInViewport(elem, partial, hidden, direction, threshold) { var $t = $(elem), t = elem, vpWidth = $w.width(), vpHeight = $w.height(), direction = (direction) ? direction : 'both', clientSize = hidden === true ? t.offsetWidth * t.offsetHeight : true; if (typeof t.getBoundingClientRect === 'function') { // Use this native browser method, if available. var rec = t.getBoundingClientRect(), tViz = rec.top >= 0 && rec.top < vpHeight + threshold, bViz = rec.bottom > 0 && rec.bottom <= vpHeight + threshold, lViz = rec.left >= 0 && rec.left < vpWidth + threshold, rViz = rec.right > 0 && rec.right <= vpWidth + threshold, vVisible = partial ? tViz || bViz : tViz && bViz, hVisible = partial ? lViz || rViz : lViz && rViz; if (direction === 'both') return clientSize && vVisible && hVisible; else if (direction === 'vertical') return clientSize && vVisible; else if (direction === 'horizontal') return clientSize && hVisible; } else { var viewTop = $w.scrollTop(), viewBottom = viewTop + vpHeight, viewLeft = $w.scrollLeft(), viewRight = viewLeft + vpWidth, offset = $t.offset(), _top = offset.top, _bottom = _top + $t.height(), _left = offset.left, _right = _left + $t.width(), compareTop = partial === true ? _bottom : _top, compareBottom = partial === true ? _top : _bottom, compareLeft = partial === true ? _right : _left, compareRight = partial === true ? _left : _right; if (direction === 'both') return !!clientSize && ((compareBottom <= viewBottom) && (compareTop >= viewTop)) && ((compareRight <= viewRight) && (compareLeft >= viewLeft)); else if (direction === 'vertical') return !!clientSize && ((compareBottom <= viewBottom) && (compareTop >= viewTop)); else if (direction === 'horizontal') return !!clientSize && ((compareRight <= viewRight) && (compareLeft >= viewLeft)); } } var unveilId = 0; function getThreshold() { var screens = $.browser.mobile ? 2.5 : 1; // This helps eliminate the draw-in effect as you scroll return Math.max(screen.availHeight * screens, 1000); } var threshold = getThreshold(); function isVisible(elem) { return visibleInViewport(elem, true, false, 'both', threshold); } function fillImage(elem) { var source = elem.getAttribute('data-src'); if (source) { ImageStore.setImageInto(elem, source); elem.setAttribute("data-src", ''); } } function unveilElements(elems) { if (!elems.length) { return; } var images = elems; unveilId++; var eventNamespace = 'unveil' + unveilId; function unveil() { var remaining = []; for (var i = 0, length = images.length; i < length; i++) { var img = images[i]; if (isVisible(img)) { fillImage(img); } else { remaining.push(img); } } images = remaining; if (!images.length) { Events.off(document, 'scroll.' + eventNamespace); Events.off(window, 'resize.' + eventNamespace); } } Events.on(document, 'scroll.' + eventNamespace, unveil); Events.on(window, 'resize.' + eventNamespace, unveil); unveil(); } function fillImages(elems) { for (var i = 0, length = elems.length; i < length; i++) { var elem = elems[0]; var source = elem.getAttribute('data-src'); if (source) { ImageStore.setImageInto(elem, source); elem.setAttribute("data-src", ''); } } } function lazyChildren(elem) { unveilElements(elem.getElementsByClassName('lazy')); } $.fn.lazyChildren = function () { if (this.length == 1) { lazyChildren(this[0]); } else { unveilElements($('.lazy', this)); } return this; }; function lazyImage(elem, url) { elem.setAttribute('data-src', url); fillImages([elem]); } window.ImageLoader = { fillImages: fillImages, lazyImage: lazyImage, lazyChildren: lazyChildren }; })(window.jQuery || window.Zepto); (function () { function setImageIntoElement(elem, url) { if (elem.tagName !== "IMG") { elem.style.backgroundImage = "url('" + url + "')"; } else { elem.setAttribute("src", url); } } function simpleImageStore() { var self = this; self.setImageInto = setImageIntoElement; } console.log('creating simpleImageStore'); window.ImageStore = new simpleImageStore(); })();