135 lines
3.7 KiB
JavaScript
Raw Normal View History

// 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;
}));