https://freetoursbyfoot.com/wp-content/plugins/oxyextras/components/assets/flickity/bg-lazyload.js

1/*!
2 * Flickity background lazyload v1.0.1
3 * lazyload background cell images
4 * https://github.com/metafizzy/flickity-bg-lazyload
5 * Licensed under MIT
6 */
7
8/*jshint browser: true, unused: true, undef: true */
9
10( function( window, factory ) {
11  // universal module definition
12  /*globals define, module, require */
13  if ( typeof define == 'function' && define.amd ) {
14    // AMD
15    define( [
16      'flickity/js/index',
17      'fizzy-ui-utils/utils'
18    ], factory );
19  } else if ( typeof module == 'object' && module.exports ) {
20    // CommonJS
21    module.exports = factory(
22      require('flickity'),
23      require('fizzy-ui-utils')
24    );
25  } else {
26    // browser global
27    factory(
28      window.Flickity,
29      window.fizzyUIUtils
30    );
31  }
32
33}( window, function factory( Flickity, utils ) {
34/*jshint strict: true */
35'use strict';
36
37Flickity.createMethods.push('_createBgLazyLoad');
38
39var proto = Flickity.prototype;
40
41proto._createBgLazyLoad = function() {
42  this.on( 'select', this.bgLazyLoad );
43};
44
45proto.bgLazyLoad = function() {
46  var lazyLoad = this.options.bgLazyLoad;
47  if ( !lazyLoad ) {
48    return;
49  }
50
51  // get adjacent cells, use lazyLoad option for adjacent count
52  var adjCount = typeof lazyLoad == 'number' ? lazyLoad : 0;
53  var cellElems = this.getAdjacentCellElements( adjCount );
54
55  for ( var i=0; i < cellElems.length; i++ ) {
56    var cellElem = cellElems[i];
57    this.bgLazyLoadElem( cellElem );
58    // select lazy elems in cell
59    var children = cellElem.querySelectorAll('[data-flickity-bg-lazyload]');
60    for ( var j=0; j < children.length; j++ ) {
61      this.bgLazyLoadElem( children[j] );
62    }
63  }
64};
65
66proto.bgLazyLoadElem = function( elem ) {
67  var attr = elem.getAttribute('data-flickity-bg-lazyload');
68  if ( attr ) {
69    new BgLazyLoader( elem, attr, this );
70  }
71};
72
73// -------------------------- LazyBGLoader -------------------------- //
74
75/**
76 * class to handle loading images
77 */
78function BgLazyLoader( elem, url, flickity ) {
79  this.element = elem;
80  this.url = url;
81  this.img = new Image();
82  this.flickity = flickity;
83  this.load();
84}
85
86BgLazyLoader.prototype.handleEvent = utils.handleEvent;
87
88BgLazyLoader.prototype.load = function() {
89  this.img.addEventListener( 'load', this );
90  this.img.addEventListener( 'error', this );
91  // load image
92  this.img.src = this.url;
93  // remove attr
94  this.element.removeAttribute('data-flickity-bg-lazyload');
95};
96
97BgLazyLoader.prototype.onload = function( event ) {
98  this.element.style.backgroundImage = 'url("' + this.url + '")';
99  this.complete( event, 'flickity-bg-lazyloaded' );
100};
101
102BgLazyLoader.prototype.onerror = function( event ) {
103  this.complete( event, 'flickity-bg-lazyerror' );
104};
105
106BgLazyLoader.prototype.complete = function( event, className ) {
107  // unbind events
108  this.img.removeEventListener( 'load', this );
109  this.img.removeEventListener( 'error', this );
110
111  this.element.classList.add( className );
112  this.flickity.dispatchEvent( 'bgLazyLoad', event, this.element );
113};
114
115// -----  ----- //
116
117Flickity.BgLazyLoader = BgLazyLoader;
118
119return Flickity;
120
121}));