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