lazyload.js 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134
  1. // lazyload
  2. ( function( window, factory ) {
  3. // universal module definition
  4. /* jshint strict: false */
  5. if ( typeof define == 'function' && define.amd ) {
  6. // AMD
  7. define( [
  8. './flickity',
  9. 'fizzy-ui-utils/utils'
  10. ], function( Flickity, utils ) {
  11. return factory( window, Flickity, utils );
  12. });
  13. } else if ( typeof module == 'object' && module.exports ) {
  14. // CommonJS
  15. module.exports = factory(
  16. window,
  17. require('./flickity'),
  18. require('fizzy-ui-utils')
  19. );
  20. } else {
  21. // browser global
  22. factory(
  23. window,
  24. window.Flickity,
  25. window.fizzyUIUtils
  26. );
  27. }
  28. }( window, function factory( window, Flickity, utils ) {
  29. 'use strict';
  30. Flickity.createMethods.push('_createLazyload');
  31. var proto = Flickity.prototype;
  32. proto._createLazyload = function() {
  33. this.on( 'select', this.lazyLoad );
  34. };
  35. proto.lazyLoad = function() {
  36. var lazyLoad = this.options.lazyLoad;
  37. if ( !lazyLoad ) {
  38. return;
  39. }
  40. // get adjacent cells, use lazyLoad option for adjacent count
  41. var adjCount = typeof lazyLoad == 'number' ? lazyLoad : 0;
  42. var cellElems = this.getAdjacentCellElements( adjCount );
  43. // get lazy images in those cells
  44. var lazyImages = [];
  45. cellElems.forEach( function( cellElem ) {
  46. var lazyCellImages = getCellLazyImages( cellElem );
  47. lazyImages = lazyImages.concat( lazyCellImages );
  48. });
  49. // load lazy images
  50. lazyImages.forEach( function( img ) {
  51. new LazyLoader( img, this );
  52. }, this );
  53. };
  54. function getCellLazyImages( cellElem ) {
  55. // check if cell element is lazy image
  56. if ( cellElem.nodeName == 'IMG' ) {
  57. var lazyloadAttr = cellElem.getAttribute('data-flickity-lazyload');
  58. var srcAttr = cellElem.getAttribute('data-flickity-lazyload-src');
  59. var srcsetAttr = cellElem.getAttribute('data-flickity-lazyload-srcset');
  60. if ( lazyloadAttr || srcAttr || srcsetAttr ) {
  61. return [ cellElem ];
  62. }
  63. }
  64. // select lazy images in cell
  65. var lazySelector = 'img[data-flickity-lazyload], ' +
  66. 'img[data-flickity-lazyload-src], img[data-flickity-lazyload-srcset]';
  67. var imgs = cellElem.querySelectorAll( lazySelector );
  68. return utils.makeArray( imgs );
  69. }
  70. // -------------------------- LazyLoader -------------------------- //
  71. /**
  72. * class to handle loading images
  73. */
  74. function LazyLoader( img, flickity ) {
  75. this.img = img;
  76. this.flickity = flickity;
  77. this.load();
  78. }
  79. LazyLoader.prototype.handleEvent = utils.handleEvent;
  80. LazyLoader.prototype.load = function() {
  81. this.img.addEventListener( 'load', this );
  82. this.img.addEventListener( 'error', this );
  83. // get src & srcset
  84. var src = this.img.getAttribute('data-flickity-lazyload') ||
  85. this.img.getAttribute('data-flickity-lazyload-src');
  86. var srcset = this.img.getAttribute('data-flickity-lazyload-srcset');
  87. // set src & serset
  88. this.img.src = src;
  89. if ( srcset ) {
  90. this.img.setAttribute( 'srcset', srcset );
  91. }
  92. // remove attr
  93. this.img.removeAttribute('data-flickity-lazyload');
  94. this.img.removeAttribute('data-flickity-lazyload-src');
  95. this.img.removeAttribute('data-flickity-lazyload-srcset');
  96. };
  97. LazyLoader.prototype.onload = function( event ) {
  98. this.complete( event, 'flickity-lazyloaded' );
  99. };
  100. LazyLoader.prototype.onerror = function( event ) {
  101. this.complete( event, 'flickity-lazyerror' );
  102. };
  103. LazyLoader.prototype.complete = function( event, className ) {
  104. // unbind events
  105. this.img.removeEventListener( 'load', this );
  106. this.img.removeEventListener( 'error', this );
  107. var cell = this.flickity.getParentCell( this.img );
  108. var cellElem = cell && cell.element;
  109. this.flickity.cellSizeChange( cellElem );
  110. this.img.classList.add( className );
  111. this.flickity.dispatchEvent( 'lazyLoad', event, cellElem );
  112. };
  113. // ----- ----- //
  114. Flickity.LazyLoader = LazyLoader;
  115. return Flickity;
  116. }));