135 lines
3.7 KiB
JavaScript
135 lines
3.7 KiB
JavaScript
// lazyload
|
|
( function( window, factory ) {
|
|
// universal module definition
|
|
/* jshint strict: false */
|
|
if ( typeof define == 'function' && define.amd ) {
|
|
// AMD
|
|
define( [
|
|
'./flickity',
|
|
'fizzy-ui-utils/utils'
|
|
], function( Flickity, utils ) {
|
|
return factory( window, Flickity, utils );
|
|
});
|
|
} else if ( typeof module == 'object' && module.exports ) {
|
|
// CommonJS
|
|
module.exports = factory(
|
|
window,
|
|
require('./flickity'),
|
|
require('fizzy-ui-utils')
|
|
);
|
|
} else {
|
|
// browser global
|
|
factory(
|
|
window,
|
|
window.Flickity,
|
|
window.fizzyUIUtils
|
|
);
|
|
}
|
|
|
|
}( window, function factory( window, Flickity, utils ) {
|
|
'use strict';
|
|
|
|
Flickity.createMethods.push('_createLazyload');
|
|
var proto = Flickity.prototype;
|
|
|
|
proto._createLazyload = function() {
|
|
this.on( 'select', this.lazyLoad );
|
|
};
|
|
|
|
proto.lazyLoad = function() {
|
|
var lazyLoad = this.options.lazyLoad;
|
|
if ( !lazyLoad ) {
|
|
return;
|
|
}
|
|
// get adjacent cells, use lazyLoad option for adjacent count
|
|
var adjCount = typeof lazyLoad == 'number' ? lazyLoad : 0;
|
|
var cellElems = this.getAdjacentCellElements( adjCount );
|
|
// get lazy images in those cells
|
|
var lazyImages = [];
|
|
cellElems.forEach( function( cellElem ) {
|
|
var lazyCellImages = getCellLazyImages( cellElem );
|
|
lazyImages = lazyImages.concat( lazyCellImages );
|
|
});
|
|
// load lazy images
|
|
lazyImages.forEach( function( img ) {
|
|
new LazyLoader( img, this );
|
|
}, this );
|
|
};
|
|
|
|
function getCellLazyImages( cellElem ) {
|
|
// check if cell element is lazy image
|
|
if ( cellElem.nodeName == 'IMG' ) {
|
|
var lazyloadAttr = cellElem.getAttribute('data-flickity-lazyload');
|
|
var srcAttr = cellElem.getAttribute('data-flickity-lazyload-src');
|
|
var srcsetAttr = cellElem.getAttribute('data-flickity-lazyload-srcset');
|
|
if ( lazyloadAttr || srcAttr || srcsetAttr ) {
|
|
return [ cellElem ];
|
|
}
|
|
}
|
|
// select lazy images in cell
|
|
var lazySelector = 'img[data-flickity-lazyload], ' +
|
|
'img[data-flickity-lazyload-src], img[data-flickity-lazyload-srcset]';
|
|
var imgs = cellElem.querySelectorAll( lazySelector );
|
|
return utils.makeArray( imgs );
|
|
}
|
|
|
|
// -------------------------- LazyLoader -------------------------- //
|
|
|
|
/**
|
|
* class to handle loading images
|
|
*/
|
|
function LazyLoader( img, flickity ) {
|
|
this.img = img;
|
|
this.flickity = flickity;
|
|
this.load();
|
|
}
|
|
|
|
LazyLoader.prototype.handleEvent = utils.handleEvent;
|
|
|
|
LazyLoader.prototype.load = function() {
|
|
this.img.addEventListener( 'load', this );
|
|
this.img.addEventListener( 'error', this );
|
|
// get src & srcset
|
|
var src = this.img.getAttribute('data-flickity-lazyload') ||
|
|
this.img.getAttribute('data-flickity-lazyload-src');
|
|
var srcset = this.img.getAttribute('data-flickity-lazyload-srcset');
|
|
// set src & serset
|
|
this.img.src = src;
|
|
if ( srcset ) {
|
|
this.img.setAttribute( 'srcset', srcset );
|
|
}
|
|
// remove attr
|
|
this.img.removeAttribute('data-flickity-lazyload');
|
|
this.img.removeAttribute('data-flickity-lazyload-src');
|
|
this.img.removeAttribute('data-flickity-lazyload-srcset');
|
|
};
|
|
|
|
LazyLoader.prototype.onload = function( event ) {
|
|
this.complete( event, 'flickity-lazyloaded' );
|
|
};
|
|
|
|
LazyLoader.prototype.onerror = function( event ) {
|
|
this.complete( event, 'flickity-lazyerror' );
|
|
};
|
|
|
|
LazyLoader.prototype.complete = function( event, className ) {
|
|
// unbind events
|
|
this.img.removeEventListener( 'load', this );
|
|
this.img.removeEventListener( 'error', this );
|
|
|
|
var cell = this.flickity.getParentCell( this.img );
|
|
var cellElem = cell && cell.element;
|
|
this.flickity.cellSizeChange( cellElem );
|
|
|
|
this.img.classList.add( className );
|
|
this.flickity.dispatchEvent( 'lazyLoad', event, cellElem );
|
|
};
|
|
|
|
// ----- ----- //
|
|
|
|
Flickity.LazyLoader = LazyLoader;
|
|
|
|
return Flickity;
|
|
|
|
}));
|