You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
149 lines
4.0 KiB
149 lines
4.0 KiB
/** |
|
* 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);
|
|
|