150 lines
4.0 KiB
JavaScript
150 lines
4.0 KiB
JavaScript
|
/**
|
||
|
|
* Lazy Plugin
|
||
|
|
* @version 2.3.4
|
||
|
|
* @author Bartosz Wojciechowski
|
||
|
|
* @author David Deutsch
|
||
|
|
* @license The MIT License (MIT)
|
||
|
|
*/
|
||
|
|
;(function($, window, document, undefined) {
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Creates the lazy plugin.
|
||
|
|
* @class The Lazy Plugin
|
||
|
|
* @param {Owl} carousel - The Owl Carousel
|
||
|
|
*/
|
||
|
|
var Lazy = function(carousel) {
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Reference to the core.
|
||
|
|
* @protected
|
||
|
|
* @type {Owl}
|
||
|
|
*/
|
||
|
|
this._core = carousel;
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Already loaded items.
|
||
|
|
* @protected
|
||
|
|
* @type {Array.<jQuery>}
|
||
|
|
*/
|
||
|
|
this._loaded = [];
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Event handlers.
|
||
|
|
* @protected
|
||
|
|
* @type {Object}
|
||
|
|
*/
|
||
|
|
this._handlers = {
|
||
|
|
'initialized.owl.carousel change.owl.carousel resized.owl.carousel': $.proxy(function(e) {
|
||
|
|
if (!e.namespace) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (!this._core.settings || !this._core.settings.lazyLoad) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
if ((e.property && e.property.name == 'position') || e.type == 'initialized') {
|
||
|
|
var settings = this._core.settings,
|
||
|
|
n = (settings.center && Math.ceil(settings.items / 2) || settings.items),
|
||
|
|
i = ((settings.center && n * -1) || 0),
|
||
|
|
position = (e.property && e.property.value !== undefined ? e.property.value : this._core.current()) + i,
|
||
|
|
clones = this._core.clones().length,
|
||
|
|
load = $.proxy(function(i, v) { this.load(v) }, this);
|
||
|
|
//TODO: Need documentation for this new option
|
||
|
|
if (settings.lazyLoadEager > 0) {
|
||
|
|
n += settings.lazyLoadEager;
|
||
|
|
// If the carousel is looping also preload images that are to the "left"
|
||
|
|
if (settings.loop) {
|
||
|
|
position -= settings.lazyLoadEager;
|
||
|
|
n++;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
while (i++ < n) {
|
||
|
|
this.load(clones / 2 + this._core.relative(position));
|
||
|
|
clones && $.each(this._core.clones(this._core.relative(position)), load);
|
||
|
|
position++;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}, this)
|
||
|
|
};
|
||
|
|
|
||
|
|
// set the default options
|
||
|
|
this._core.options = $.extend({}, Lazy.Defaults, this._core.options);
|
||
|
|
|
||
|
|
// register event handler
|
||
|
|
this._core.$element.on(this._handlers);
|
||
|
|
};
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Default options.
|
||
|
|
* @public
|
||
|
|
*/
|
||
|
|
Lazy.Defaults = {
|
||
|
|
lazyLoad: false,
|
||
|
|
lazyLoadEager: 0
|
||
|
|
};
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Loads all resources of an item at the specified position.
|
||
|
|
* @param {Number} position - The absolute position of the item.
|
||
|
|
* @protected
|
||
|
|
*/
|
||
|
|
Lazy.prototype.load = function(position) {
|
||
|
|
var $item = this._core.$stage.children().eq(position),
|
||
|
|
$elements = $item && $item.find('.owl-lazy');
|
||
|
|
|
||
|
|
if (!$elements || $.inArray($item.get(0), this._loaded) > -1) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
$elements.each($.proxy(function(index, element) {
|
||
|
|
var $element = $(element), image,
|
||
|
|
url = (window.devicePixelRatio > 1 && $element.attr('data-src-retina')) || $element.attr('data-src') || $element.attr('data-srcset');
|
||
|
|
|
||
|
|
this._core.trigger('load', { element: $element, url: url }, 'lazy');
|
||
|
|
|
||
|
|
if ($element.is('img')) {
|
||
|
|
$element.one('load.owl.lazy', $.proxy(function() {
|
||
|
|
$element.css('opacity', 1);
|
||
|
|
this._core.trigger('loaded', { element: $element, url: url }, 'lazy');
|
||
|
|
}, this)).attr('src', url);
|
||
|
|
} else if ($element.is('source')) {
|
||
|
|
$element.one('load.owl.lazy', $.proxy(function() {
|
||
|
|
this._core.trigger('loaded', { element: $element, url: url }, 'lazy');
|
||
|
|
}, this)).attr('srcset', url);
|
||
|
|
} else {
|
||
|
|
image = new Image();
|
||
|
|
image.onload = $.proxy(function() {
|
||
|
|
$element.css({
|
||
|
|
'background-image': 'url("' + url + '")',
|
||
|
|
'opacity': '1'
|
||
|
|
});
|
||
|
|
this._core.trigger('loaded', { element: $element, url: url }, 'lazy');
|
||
|
|
}, this);
|
||
|
|
image.src = url;
|
||
|
|
}
|
||
|
|
}, this));
|
||
|
|
|
||
|
|
this._loaded.push($item.get(0));
|
||
|
|
};
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Destroys the plugin.
|
||
|
|
* @public
|
||
|
|
*/
|
||
|
|
Lazy.prototype.destroy = function() {
|
||
|
|
var handler, property;
|
||
|
|
|
||
|
|
for (handler in this.handlers) {
|
||
|
|
this._core.$element.off(handler, this.handlers[handler]);
|
||
|
|
}
|
||
|
|
for (property in Object.getOwnPropertyNames(this)) {
|
||
|
|
typeof this[property] != 'function' && (this[property] = null);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
$.fn.owlCarousel.Constructor.Plugins.Lazy = Lazy;
|
||
|
|
|
||
|
|
})(window.Zepto || window.jQuery, window, document);
|