Reduce the code size. Refactoring.

dist/js/splide.cjs.js

@@ -479,21 +479,12 @@ function RequestInterval(interval, onInterval, onUpdate, limit) {
 
   function update() {
     if (!paused) {
-      var elapsed = now() - startTime;
+      rate = min((now() - startTime) / interval, 1);
+      onUpdate && onUpdate(rate);
 
-      if (elapsed >= interval) {
-        rate = 1;
-        startTime = now();
-      } else {
-        rate = elapsed / interval;
-      }
-
-      if (onUpdate) {
-        onUpdate(rate);
-      }
-
-      if (rate === 1) {
+      if (rate >= 1) {
         onInterval();
+        startTime = now();
 
         if (limit && ++count >= limit) {
           return pause();
@@ -525,7 +516,7 @@ function RequestInterval(interval, onInterval, onUpdate, limit) {
   }
 
   function cancel() {
-    cancelAnimationFrame(id);
+    id && cancelAnimationFrame(id);
     rate = 0;
     id = 0;
     paused = true;
@@ -2403,111 +2394,76 @@ function LazyLoad(Splide2, Components2, options) {
       emit = _EventInterface12.emit;
 
   var isSequential = options.lazyLoad === "sequential";
-  var images = [];
-  var index = 0;
+  var events = [EVENT_MOUNTED, EVENT_REFRESH, EVENT_MOVED, EVENT_SCROLLED];
+  var entries = [];
 
   function mount() {
     if (options.lazyLoad) {
       init();
-      on(EVENT_REFRESH, destroy);
       on(EVENT_REFRESH, init);
-
-      if (!isSequential) {
-        on([EVENT_MOUNTED, EVENT_REFRESH, EVENT_MOVED, EVENT_SCROLLED], observe);
-      }
+      isSequential || on(events, observe);
     }
   }
 
   function init() {
-    Components2.Slides.forEach(function (_Slide) {
-      queryAll(_Slide.slide, IMAGE_SELECTOR).forEach(function (_img) {
-        var src = getAttribute(_img, SRC_DATA_ATTRIBUTE);
-        var srcset = getAttribute(_img, SRCSET_DATA_ATTRIBUTE);
+    empty(entries);
+    Components2.Slides.forEach(function (Slide) {
+      queryAll(Slide.slide, IMAGE_SELECTOR).forEach(function (img) {
+        var src = getAttribute(img, SRC_DATA_ATTRIBUTE);
+        var srcset = getAttribute(img, SRCSET_DATA_ATTRIBUTE);
 
-        if (src !== _img.src || srcset !== _img.srcset) {
+        if (src !== img.src || srcset !== img.srcset) {
           var className = options.classes.spinner;
-          var parent = _img.parentElement;
-
-          var _spinner = child(parent, "." + className) || create("span", className, parent);
-
-          setAttribute(_spinner, ROLE, "presentation");
-          images.push({
-            _img: _img,
-            _Slide: _Slide,
-            src: src,
-            srcset: srcset,
-            _spinner: _spinner
-          });
-          !_img.src && display(_img, "none");
+          var parent = img.parentElement;
+          var spinner = child(parent, "." + className) || create("span", className, parent);
+          entries.push([img, Slide, spinner]);
+          img.src || display(img, "none");
         }
       });
     });
-
-    if (isSequential) {
-      loadNext();
-    }
-  }
-
-  function destroy() {
-    index = 0;
-    images = [];
+    isSequential && loadNext();
   }
 
   function observe() {
-    images = images.filter(function (data) {
+    entries = entries.filter(function (data) {
       var distance = options.perPage * ((options.preloadPages || 1) + 1) - 1;
-
-      if (data._Slide.isWithin(Splide2.index, distance)) {
-        return load(data);
-      }
-
-      return true;
+      return data[1].isWithin(Splide2.index, distance) ? load(data) : true;
     });
-
-    if (!images.length) {
-      off(EVENT_MOVED);
-    }
+    entries.length || off(events);
   }
 
   function load(data) {
-    var _img = data._img;
-    addClass(data._Slide.slide, CLASS_LOADING);
-    bind(_img, "load error", function (e) {
-      onLoad(data, e.type === "error");
-    });
-    ["srcset", "src"].forEach(function (name) {
-      if (data[name]) {
-        setAttribute(_img, name, data[name]);
-        removeAttribute(_img, name === "src" ? SRC_DATA_ATTRIBUTE : SRCSET_DATA_ATTRIBUTE);
-      }
-    });
-  }
-
-  function onLoad(data, error) {
-    var _Slide = data._Slide;
-    removeClass(_Slide.slide, CLASS_LOADING);
-
-    if (!error) {
-      remove(data._spinner);
-      display(data._img, "");
-      emit(EVENT_LAZYLOAD_LOADED, data._img, _Slide);
+    var img = data[0];
+    addClass(data[1].slide, CLASS_LOADING);
+    bind(img, "load error", apply(onLoad, data));
+    setAttribute(img, "src", getAttribute(img, SRC_DATA_ATTRIBUTE));
+    setAttribute(img, "srcset", getAttribute(img, SRCSET_DATA_ATTRIBUTE));
+    removeAttribute(img, SRC_DATA_ATTRIBUTE);
+    removeAttribute(img, SRCSET_DATA_ATTRIBUTE);
+  }
+
+  function onLoad(data, e) {
+    var img = data[0],
+        Slide = data[1];
+    removeClass(Slide.slide, CLASS_LOADING);
+
+    if (e.type !== "error") {
+      remove(data[2]);
+      display(img, "");
+      emit(EVENT_LAZYLOAD_LOADED, img, Slide);
       emit(EVENT_RESIZE);
     }
 
-    if (isSequential) {
-      loadNext();
-    }
+    isSequential && loadNext();
   }
 
   function loadNext() {
-    if (index < images.length) {
-      load(images[index++]);
-    }
+    entries.length && load(entries.shift());
   }
 
   return {
     mount: mount,
-    destroy: destroy
+    destroy: apply(empty, entries)
   };
 }
 
@@ -2981,8 +2937,8 @@ var _Splide = /*#__PURE__*/function () {
     this.Components = {};
     this.state = State(CREATED);
     this.splides = [];
-    this._options = {};
-    this._Extensions = {};
+    this._o = {};
+    this._E = {};
     var root = isString(target) ? query(document, target) : target;
     assert(root, root + " is invalid.");
     this.root = root;
@@ -2994,7 +2950,7 @@ var _Splide = /*#__PURE__*/function () {
       assert(false, "Invalid JSON");
     }
 
-    this._options = Object.create(merge({}, options));
+    this._o = Object.create(merge({}, options));
   }
 
   var _proto = _Splide.prototype;
@@ -3006,14 +2962,14 @@ var _Splide = /*#__PURE__*/function () {
         Components2 = this.Components;
     assert(state.is([CREATED, DESTROYED]), "Already mounted!");
     state.set(CREATED);
-    this._Components = Components2;
-    this._Transition = Transition || this._Transition || (this.is(FADE) ? Fade : Slide);
-    this._Extensions = Extensions || this._Extensions;
-    var Constructors = assign({}, ComponentConstructors, this._Extensions, {
-      Transition: this._Transition
+    this._C = Components2;
+    this._T = Transition || this._T || (this.is(FADE) ? Fade : Slide);
+    this._E = Extensions || this._E;
+    var Constructors = assign({}, ComponentConstructors, this._E, {
+      Transition: this._T
     });
     forOwn(Constructors, function (Component, key) {
-      var component = Component(_this, Components2, _this._options);
+      var component = Component(_this, Components2, _this._o);
       Components2[key] = component;
       component.setup && component.setup();
     });
@@ -3037,7 +2993,7 @@ var _Splide = /*#__PURE__*/function () {
     });
 
     if (this.state.is(IDLE)) {
-      this._Components.Sync.remount();
+      this._C.Sync.remount();
 
       splide.Components.Sync.remount();
     }
@@ -3046,7 +3002,7 @@ var _Splide = /*#__PURE__*/function () {
   };
 
   _proto.go = function go(control) {
-    this._Components.Controller.go(control);
+    this._C.Controller.go(control);
 
     return this;
   };
@@ -3070,19 +3026,19 @@ var _Splide = /*#__PURE__*/function () {
   };
 
   _proto.add = function add(slides, index) {
-    this._Components.Slides.add(slides, index);
+    this._C.Slides.add(slides, index);
 
     return this;
   };
 
   _proto.remove = function remove(matcher) {
-    this._Components.Slides.remove(matcher);
+    this._C.Slides.remove(matcher);
 
     return this;
   };
 
   _proto.is = function is(type) {
-    return this._options.type === type;
+    return this._o.type === type;
   };
 
   _proto.refresh = function refresh() {
@@ -3101,7 +3057,7 @@ var _Splide = /*#__PURE__*/function () {
     if (state.is(CREATED)) {
       EventInterface(this).on(EVENT_READY, this.destroy.bind(this, completely));
     } else {
-      forOwn(this._Components, function (component) {
+      forOwn(this._C, function (component) {
         component.destroy && component.destroy(completely);
       }, true);
       event.emit(EVENT_DESTROY);
@@ -3116,25 +3072,25 @@ var _Splide = /*#__PURE__*/function () {
   _createClass(_Splide, [{
     key: "options",
     get: function get() {
-      return this._options;
+      return this._o;
     },
     set: function set(options) {
-      var _options = this._options;
-      merge(_options, options);
+      var _o = this._o;
+      merge(_o, options);
 
       if (!this.state.is(CREATED)) {
-        this.emit(EVENT_UPDATED, _options);
+        this.emit(EVENT_UPDATED, _o);
       }
     }
   }, {
     key: "length",
     get: function get() {
-      return this._Components.Slides.getLength(true);
+      return this._C.Slides.getLength(true);
     }
   }, {
     key: "index",
     get: function get() {
-      return this._Components.Controller.getIndex();
+      return this._C.Controller.getIndex();
     }
   }]);
 

dist/js/splide.esm.js

@@ -474,21 +474,12 @@ function RequestInterval(interval, onInterval, onUpdate, limit) {
 
   function update() {
     if (!paused) {
-      var elapsed = now() - startTime;
+      rate = min((now() - startTime) / interval, 1);
+      onUpdate && onUpdate(rate);
 
-      if (elapsed >= interval) {
-        rate = 1;
-        startTime = now();
-      } else {
-        rate = elapsed / interval;
-      }
-
-      if (onUpdate) {
-        onUpdate(rate);
-      }
-
-      if (rate === 1) {
+      if (rate >= 1) {
         onInterval();
+        startTime = now();
 
         if (limit && ++count >= limit) {
           return pause();
@@ -520,7 +511,7 @@ function RequestInterval(interval, onInterval, onUpdate, limit) {
   }
 
   function cancel() {
-    cancelAnimationFrame(id);
+    id && cancelAnimationFrame(id);
     rate = 0;
     id = 0;
     paused = true;
@@ -2398,111 +2389,76 @@ function LazyLoad(Splide2, Components2, options) {
       emit = _EventInterface12.emit;
 
   var isSequential = options.lazyLoad === "sequential";
-  var images = [];
-  var index = 0;
+  var events = [EVENT_MOUNTED, EVENT_REFRESH, EVENT_MOVED, EVENT_SCROLLED];
+  var entries = [];
 
   function mount() {
     if (options.lazyLoad) {
       init();
-      on(EVENT_REFRESH, destroy);
       on(EVENT_REFRESH, init);
-
-      if (!isSequential) {
-        on([EVENT_MOUNTED, EVENT_REFRESH, EVENT_MOVED, EVENT_SCROLLED], observe);
-      }
+      isSequential || on(events, observe);
     }
   }
 
   function init() {
-    Components2.Slides.forEach(function (_Slide) {
-      queryAll(_Slide.slide, IMAGE_SELECTOR).forEach(function (_img) {
-        var src = getAttribute(_img, SRC_DATA_ATTRIBUTE);
-        var srcset = getAttribute(_img, SRCSET_DATA_ATTRIBUTE);
+    empty(entries);
+    Components2.Slides.forEach(function (Slide) {
+      queryAll(Slide.slide, IMAGE_SELECTOR).forEach(function (img) {
+        var src = getAttribute(img, SRC_DATA_ATTRIBUTE);
+        var srcset = getAttribute(img, SRCSET_DATA_ATTRIBUTE);
 
-        if (src !== _img.src || srcset !== _img.srcset) {
+        if (src !== img.src || srcset !== img.srcset) {
           var className = options.classes.spinner;
-          var parent = _img.parentElement;
-
-          var _spinner = child(parent, "." + className) || create("span", className, parent);
-
-          setAttribute(_spinner, ROLE, "presentation");
-          images.push({
-            _img: _img,
-            _Slide: _Slide,
-            src: src,
-            srcset: srcset,
-            _spinner: _spinner
-          });
-          !_img.src && display(_img, "none");
+          var parent = img.parentElement;
+          var spinner = child(parent, "." + className) || create("span", className, parent);
+          entries.push([img, Slide, spinner]);
+          img.src || display(img, "none");
         }
       });
     });
-
-    if (isSequential) {
-      loadNext();
-    }
-  }
-
-  function destroy() {
-    index = 0;
-    images = [];
+    isSequential && loadNext();
   }
 
   function observe() {
-    images = images.filter(function (data) {
+    entries = entries.filter(function (data) {
       var distance = options.perPage * ((options.preloadPages || 1) + 1) - 1;
-
-      if (data._Slide.isWithin(Splide2.index, distance)) {
-        return load(data);
-      }
-
-      return true;
+      return data[1].isWithin(Splide2.index, distance) ? load(data) : true;
     });
-
-    if (!images.length) {
-      off(EVENT_MOVED);
-    }
+    entries.length || off(events);
   }
 
   function load(data) {
-    var _img = data._img;
-    addClass(data._Slide.slide, CLASS_LOADING);
-    bind(_img, "load error", function (e) {
-      onLoad(data, e.type === "error");
-    });
-    ["srcset", "src"].forEach(function (name) {
-      if (data[name]) {
-        setAttribute(_img, name, data[name]);
-        removeAttribute(_img, name === "src" ? SRC_DATA_ATTRIBUTE : SRCSET_DATA_ATTRIBUTE);
-      }
-    });
-  }
-
-  function onLoad(data, error) {
-    var _Slide = data._Slide;
-    removeClass(_Slide.slide, CLASS_LOADING);
-
-    if (!error) {
-      remove(data._spinner);
-      display(data._img, "");
-      emit(EVENT_LAZYLOAD_LOADED, data._img, _Slide);
+    var img = data[0];
+    addClass(data[1].slide, CLASS_LOADING);
+    bind(img, "load error", apply(onLoad, data));
+    setAttribute(img, "src", getAttribute(img, SRC_DATA_ATTRIBUTE));
+    setAttribute(img, "srcset", getAttribute(img, SRCSET_DATA_ATTRIBUTE));
+    removeAttribute(img, SRC_DATA_ATTRIBUTE);
+    removeAttribute(img, SRCSET_DATA_ATTRIBUTE);
+  }
+
+  function onLoad(data, e) {
+    var img = data[0],
+        Slide = data[1];
+    removeClass(Slide.slide, CLASS_LOADING);
+
+    if (e.type !== "error") {
+      remove(data[2]);
+      display(img, "");
+      emit(EVENT_LAZYLOAD_LOADED, img, Slide);
       emit(EVENT_RESIZE);
     }
 
-    if (isSequential) {
-      loadNext();
-    }
+    isSequential && loadNext();
   }
 
   function loadNext() {
-    if (index < images.length) {
-      load(images[index++]);
-    }
+    entries.length && load(entries.shift());
   }
 
   return {
     mount: mount,
-    destroy: destroy
+    destroy: apply(empty, entries)
   };
 }
 
@@ -2976,8 +2932,8 @@ var _Splide = /*#__PURE__*/function () {
     this.Components = {};
     this.state = State(CREATED);
     this.splides = [];
-    this._options = {};
-    this._Extensions = {};
+    this._o = {};
+    this._E = {};
     var root = isString(target) ? query(document, target) : target;
     assert(root, root + " is invalid.");
     this.root = root;
@@ -2989,7 +2945,7 @@ var _Splide = /*#__PURE__*/function () {
       assert(false, "Invalid JSON");
     }
 
-    this._options = Object.create(merge({}, options));
+    this._o = Object.create(merge({}, options));
   }
 
   var _proto = _Splide.prototype;
@@ -3001,14 +2957,14 @@ var _Splide = /*#__PURE__*/function () {
         Components2 = this.Components;
     assert(state.is([CREATED, DESTROYED]), "Already mounted!");
     state.set(CREATED);
-    this._Components = Components2;
-    this._Transition = Transition || this._Transition || (this.is(FADE) ? Fade : Slide);
-    this._Extensions = Extensions || this._Extensions;
-    var Constructors = assign({}, ComponentConstructors, this._Extensions, {
-      Transition: this._Transition
+    this._C = Components2;
+    this._T = Transition || this._T || (this.is(FADE) ? Fade : Slide);
+    this._E = Extensions || this._E;
+    var Constructors = assign({}, ComponentConstructors, this._E, {
+      Transition: this._T
     });
     forOwn(Constructors, function (Component, key) {
-      var component = Component(_this, Components2, _this._options);
+      var component = Component(_this, Components2, _this._o);
       Components2[key] = component;
       component.setup && component.setup();
     });
@@ -3032,7 +2988,7 @@ var _Splide = /*#__PURE__*/function () {
     });
 
     if (this.state.is(IDLE)) {
-      this._Components.Sync.remount();
+      this._C.Sync.remount();
 
       splide.Components.Sync.remount();
     }
@@ -3041,7 +2997,7 @@ var _Splide = /*#__PURE__*/function () {
   };
 
   _proto.go = function go(control) {
-    this._Components.Controller.go(control);
+    this._C.Controller.go(control);
 
     return this;
   };
@@ -3065,19 +3021,19 @@ var _Splide = /*#__PURE__*/function () {
   };
 
   _proto.add = function add(slides, index) {
-    this._Components.Slides.add(slides, index);
+    this._C.Slides.add(slides, index);
 
     return this;
   };
 
   _proto.remove = function remove(matcher) {
-    this._Components.Slides.remove(matcher);
+    this._C.Slides.remove(matcher);
 
     return this;
   };
 
   _proto.is = function is(type) {
-    return this._options.type === type;
+    return this._o.type === type;
   };
 
   _proto.refresh = function refresh() {
@@ -3096,7 +3052,7 @@ var _Splide = /*#__PURE__*/function () {
     if (state.is(CREATED)) {
       EventInterface(this).on(EVENT_READY, this.destroy.bind(this, completely));
     } else {
-      forOwn(this._Components, function (component) {
+      forOwn(this._C, function (component) {
         component.destroy && component.destroy(completely);
       }, true);
       event.emit(EVENT_DESTROY);
@@ -3111,25 +3067,25 @@ var _Splide = /*#__PURE__*/function () {
   _createClass(_Splide, [{
     key: "options",
     get: function get() {
-      return this._options;
+      return this._o;
     },
     set: function set(options) {
-      var _options = this._options;
-      merge(_options, options);
+      var _o = this._o;
+      merge(_o, options);
 
       if (!this.state.is(CREATED)) {
-        this.emit(EVENT_UPDATED, _options);
+        this.emit(EVENT_UPDATED, _o);
       }
     }
   }, {
     key: "length",
     get: function get() {
-      return this._Components.Slides.getLength(true);
+      return this._C.Slides.getLength(true);
     }
   }, {
     key: "index",
     get: function get() {
-      return this._Components.Controller.getIndex();
+      return this._C.Controller.getIndex();
     }
   }]);
 

dist/js/splide.js

@@ -475,21 +475,12 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 
     function update() {
       if (!paused) {
-        var elapsed = now() - startTime;
+        rate = min((now() - startTime) / interval, 1);
+        onUpdate && onUpdate(rate);
 
-        if (elapsed >= interval) {
-          rate = 1;
-          startTime = now();
-        } else {
-          rate = elapsed / interval;
-        }
-
-        if (onUpdate) {
-          onUpdate(rate);
-        }
-
-        if (rate === 1) {
+        if (rate >= 1) {
           onInterval();
+          startTime = now();
 
           if (limit && ++count >= limit) {
             return pause();
@@ -521,7 +512,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     }
 
     function cancel() {
-      cancelAnimationFrame(id);
+      id && cancelAnimationFrame(id);
       rate = 0;
       id = 0;
       paused = true;
@@ -2397,111 +2388,76 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
         emit = _EventInterface12.emit;
 
     var isSequential = options.lazyLoad === "sequential";
-    var images = [];
-    var index = 0;
+    var events = [EVENT_MOUNTED, EVENT_REFRESH, EVENT_MOVED, EVENT_SCROLLED];
+    var entries = [];
 
     function mount() {
       if (options.lazyLoad) {
         init();
-        on(EVENT_REFRESH, destroy);
         on(EVENT_REFRESH, init);
-
-        if (!isSequential) {
-          on([EVENT_MOUNTED, EVENT_REFRESH, EVENT_MOVED, EVENT_SCROLLED], observe);
-        }
+        isSequential || on(events, observe);
       }
     }
 
     function init() {
-      Components2.Slides.forEach(function (_Slide) {
-        queryAll(_Slide.slide, IMAGE_SELECTOR).forEach(function (_img) {
-          var src = getAttribute(_img, SRC_DATA_ATTRIBUTE);
-          var srcset = getAttribute(_img, SRCSET_DATA_ATTRIBUTE);
+      empty(entries);
+      Components2.Slides.forEach(function (Slide) {
+        queryAll(Slide.slide, IMAGE_SELECTOR).forEach(function (img) {
+          var src = getAttribute(img, SRC_DATA_ATTRIBUTE);
+          var srcset = getAttribute(img, SRCSET_DATA_ATTRIBUTE);
 
-          if (src !== _img.src || srcset !== _img.srcset) {
+          if (src !== img.src || srcset !== img.srcset) {
             var className = options.classes.spinner;
-            var parent = _img.parentElement;
-
-            var _spinner = child(parent, "." + className) || create("span", className, parent);
-
-            setAttribute(_spinner, ROLE, "presentation");
-            images.push({
-              _img: _img,
-              _Slide: _Slide,
-              src: src,
-              srcset: srcset,
-              _spinner: _spinner
-            });
-            !_img.src && display(_img, "none");
+            var parent = img.parentElement;
+            var spinner = child(parent, "." + className) || create("span", className, parent);
+            entries.push([img, Slide, spinner]);
+            img.src || display(img, "none");
           }
         });
       });
-
-      if (isSequential) {
-        loadNext();
-      }
-    }
-
-    function destroy() {
-      index = 0;
-      images = [];
+      isSequential && loadNext();
     }
 
     function observe() {
-      images = images.filter(function (data) {
+      entries = entries.filter(function (data) {
         var distance = options.perPage * ((options.preloadPages || 1) + 1) - 1;
-
-        if (data._Slide.isWithin(Splide2.index, distance)) {
-          return load(data);
-        }
-
-        return true;
+        return data[1].isWithin(Splide2.index, distance) ? load(data) : true;
       });
-
-      if (!images.length) {
-        off(EVENT_MOVED);
-      }
+      entries.length || off(events);
     }
 
     function load(data) {
-      var _img = data._img;
-      addClass(data._Slide.slide, CLASS_LOADING);
-      bind(_img, "load error", function (e) {
-        onLoad(data, e.type === "error");
-      });
-      ["srcset", "src"].forEach(function (name) {
-        if (data[name]) {
-          setAttribute(_img, name, data[name]);
-          removeAttribute(_img, name === "src" ? SRC_DATA_ATTRIBUTE : SRCSET_DATA_ATTRIBUTE);
-        }
-      });
-    }
-
-    function onLoad(data, error) {
-      var _Slide = data._Slide;
-      removeClass(_Slide.slide, CLASS_LOADING);
-
-      if (!error) {
-        remove(data._spinner);
-        display(data._img, "");
-        emit(EVENT_LAZYLOAD_LOADED, data._img, _Slide);
+      var img = data[0];
+      addClass(data[1].slide, CLASS_LOADING);
+      bind(img, "load error", apply(onLoad, data));
+      setAttribute(img, "src", getAttribute(img, SRC_DATA_ATTRIBUTE));
+      setAttribute(img, "srcset", getAttribute(img, SRCSET_DATA_ATTRIBUTE));
+      removeAttribute(img, SRC_DATA_ATTRIBUTE);
+      removeAttribute(img, SRCSET_DATA_ATTRIBUTE);
+    }
+
+    function onLoad(data, e) {
+      var img = data[0],
+          Slide = data[1];
+      removeClass(Slide.slide, CLASS_LOADING);
+
+      if (e.type !== "error") {
+        remove(data[2]);
+        display(img, "");
+        emit(EVENT_LAZYLOAD_LOADED, img, Slide);
         emit(EVENT_RESIZE);
       }
 
-      if (isSequential) {
-        loadNext();
-      }
+      isSequential && loadNext();
     }
 
     function loadNext() {
-      if (index < images.length) {
-        load(images[index++]);
-      }
+      entries.length && load(entries.shift());
     }
 
     return {
       mount: mount,
-      destroy: destroy
+      destroy: apply(empty, entries)
     };
   }
 
@@ -2975,8 +2931,8 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       this.Components = {};
       this.state = State(CREATED);
       this.splides = [];
-      this._options = {};
-      this._Extensions = {};
+      this._o = {};
+      this._E = {};
       var root = isString(target) ? query(document, target) : target;
       assert(root, root + " is invalid.");
       this.root = root;
@@ -2988,7 +2944,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
         assert(false, "Invalid JSON");
       }
 
-      this._options = Object.create(merge({}, options));
+      this._o = Object.create(merge({}, options));
     }
 
     var _proto = _Splide.prototype;
@@ -3000,14 +2956,14 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
           Components2 = this.Components;
       assert(state.is([CREATED, DESTROYED]), "Already mounted!");
       state.set(CREATED);
-      this._Components = Components2;
-      this._Transition = Transition || this._Transition || (this.is(FADE) ? Fade : Slide);
-      this._Extensions = Extensions || this._Extensions;
-      var Constructors = assign({}, ComponentConstructors, this._Extensions, {
-        Transition: this._Transition
+      this._C = Components2;
+      this._T = Transition || this._T || (this.is(FADE) ? Fade : Slide);
+      this._E = Extensions || this._E;
+      var Constructors = assign({}, ComponentConstructors, this._E, {
+        Transition: this._T
       });
       forOwn(Constructors, function (Component, key) {
-        var component = Component(_this, Components2, _this._options);
+        var component = Component(_this, Components2, _this._o);
         Components2[key] = component;
         component.setup && component.setup();
       });
@@ -3031,7 +2987,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       });
 
       if (this.state.is(IDLE)) {
-        this._Components.Sync.remount();
+        this._C.Sync.remount();
 
         splide.Components.Sync.remount();
       }
@@ -3040,7 +2996,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     };
 
     _proto.go = function go(control) {
-      this._Components.Controller.go(control);
+      this._C.Controller.go(control);
 
       return this;
     };
@@ -3064,19 +3020,19 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     };
 
     _proto.add = function add(slides, index) {
-      this._Components.Slides.add(slides, index);
+      this._C.Slides.add(slides, index);
 
       return this;
     };
 
     _proto.remove = function remove(matcher) {
-      this._Components.Slides.remove(matcher);
+      this._C.Slides.remove(matcher);
 
       return this;
     };
 
     _proto.is = function is(type) {
-      return this._options.type === type;
+      return this._o.type === type;
     };
 
     _proto.refresh = function refresh() {
@@ -3095,7 +3051,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
       if (state.is(CREATED)) {
         EventInterface(this).on(EVENT_READY, this.destroy.bind(this, completely));
       } else {
-        forOwn(this._Components, function (component) {
+        forOwn(this._C, function (component) {
           component.destroy && component.destroy(completely);
         }, true);
         event.emit(EVENT_DESTROY);
@@ -3110,25 +3066,25 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
     _createClass(_Splide, [{
       key: "options",
       get: function get() {
-        return this._options;
+        return this._o;
       },
       set: function set(options) {
-        var _options = this._options;
-        merge(_options, options);
+        var _o = this._o;
+        merge(_o, options);
 
         if (!this.state.is(CREATED)) {
-          this.emit(EVENT_UPDATED, _options);
+          this.emit(EVENT_UPDATED, _o);
         }
       }
     }, {
       key: "length",
       get: function get() {
-        return this._Components.Slides.getLength(true);
+        return this._C.Slides.getLength(true);
       }
     }, {
       key: "index",
       get: function get() {
-        return this._Components.Controller.getIndex();
+        return this._C.Controller.getIndex();
       }
     }]);
 

dist/types/index.d.ts

@@ -963,19 +963,19 @@ declare class Splide {
     /**
      * The current options.
      */
-    private readonly _options;
+    private readonly _o;
     /**
      * The collection of all components.
      */
-    private _Components;
+    private _C;
     /**
      * The collection of extensions.
      */
-    private _Extensions;
+    private _E;
     /**
      * The Transition component.
      */
-    private _Transition;
+    private _T;
     /**
      * The Splide constructor.
      *

src/js/components/LazyLoad/LazyLoad.ts

@@ -1,4 +1,3 @@
-import { ROLE } from '../../constants/attributes';
 import { CLASS_LOADING } from '../../constants/classes';
 import {
   EVENT_LAZYLOAD_LOADED,
@@ -13,9 +12,11 @@ import { Splide } from '../../core/Splide/Splide';
 import { BaseComponent, Components, Options } from '../../types';
 import {
   addClass,
+  apply,
   child,
   create,
   display,
+  empty,
   getAttribute,
   queryAll,
   remove,
@@ -36,17 +37,12 @@ export interface LazyLoadComponent extends BaseComponent {
 }
 
 /**
- * The interface for all components.
+ * The type for each entry.
+ * Use tuple for better compression.
  *
- * @since 3.0.0
+ * @since 4.0.0
  */
-export interface LazyLoadImagesData {
-  _img: HTMLImageElement;
-  _spinner: HTMLSpanElement;
-  _Slide: SlideComponent;
-  src: string | null;
-  srcset: string | null;
-}
+type LazyLoadEntry = [ HTMLImageElement, SlideComponent, HTMLSpanElement ];
 
 /**
  * The component for lazily loading images.
@@ -62,16 +58,12 @@ export interface LazyLoadImagesData {
 export function LazyLoad( Splide: Splide, Components: Components, options: Options ): LazyLoadComponent {
   const { on, off, bind, emit } = EventInterface( Splide );
   const isSequential = options.lazyLoad === 'sequential';
+  const events       = [ EVENT_MOUNTED, EVENT_REFRESH, EVENT_MOVED, EVENT_SCROLLED ];
 
   /**
    * Stores data of images.
    */
-  let images: LazyLoadImagesData[] = [];
-
-  /**
-   * The current index of images.
-   */
-  let index = 0;
+  let entries: LazyLoadEntry[] = [];
 
   /**
    * Called when the component is mounted.
@@ -79,47 +71,35 @@ export function LazyLoad( Splide: Splide, Components: Components, options: Optio
   function mount(): void {
     if ( options.lazyLoad ) {
       init();
-      on( EVENT_REFRESH, destroy );
       on( EVENT_REFRESH, init );
-
-      if ( ! isSequential ) {
-        on( [ EVENT_MOUNTED, EVENT_REFRESH, EVENT_MOVED, EVENT_SCROLLED ], observe );
-      }
+      isSequential || on( events, observe );
     }
   }
 
   /**
-   * Finds images that contain specific data attributes.
+   * Finds images to register entries.
+   * Note that spinner can be already available because of `refresh()`.
    */
   function init() {
-    Components.Slides.forEach( _Slide => {
-      queryAll<HTMLImageElement>( _Slide.slide, IMAGE_SELECTOR ).forEach( _img => {
-        const src    = getAttribute( _img, SRC_DATA_ATTRIBUTE );
-        const srcset = getAttribute( _img, SRCSET_DATA_ATTRIBUTE );
+    empty( entries );
+
+    Components.Slides.forEach( Slide => {
+      queryAll<HTMLImageElement>( Slide.slide, IMAGE_SELECTOR ).forEach( img => {
+        const src    = getAttribute( img, SRC_DATA_ATTRIBUTE );
+        const srcset = getAttribute( img, SRCSET_DATA_ATTRIBUTE );
 
-        if ( src !== _img.src || srcset !== _img.srcset ) {
+        if ( src !== img.src || srcset !== img.srcset ) {
           const className = options.classes.spinner;
-          const parent    = _img.parentElement;
-          const _spinner  = child( parent, `.${ className }` ) || create( 'span', className, parent );
+          const parent    = img.parentElement;
+          const spinner   = child( parent, `.${ className }` ) || create( 'span', className, parent );
 
-          setAttribute( _spinner, ROLE, 'presentation' );
-          images.push( { _img, _Slide, src, srcset, _spinner } );
-          ! _img.src && display( _img, 'none' );
+          entries.push( [ img, Slide, spinner ] );
+          img.src || display( img, 'none' );
         }
       } );
     } );
 
-    if ( isSequential ) {
-      loadNext();
-    }
-  }
-
-  /**
-   * Destroys the component.
-   */
-  function destroy() {
-    index  = 0;
-    images = [];
+    isSequential && loadNext();
   }
 
   /**
@@ -127,74 +107,61 @@ export function LazyLoad( Splide: Splide, Components: Components, options: Optio
    * The last `+1` is for the current page.
    */
   function observe(): void {
-    images = images.filter( data => {
+    entries = entries.filter( data => {
       const distance = options.perPage * ( ( options.preloadPages || 1 ) + 1 ) - 1;
-
-      if ( data._Slide.isWithin( Splide.index, distance ) ) {
-        return load( data );
-      }
-
-      return true;
+      return data[ 1 ].isWithin( Splide.index, distance ) ? load( data ) : true;
     } );
 
-    if ( ! images.length ) {
-      off( EVENT_MOVED );
-    }
+    entries.length || off( events );
   }
 
   /**
    * Starts loading the image in the data.
    *
-   * @param data - A LazyLoadImagesData object.
+   * @param data - A LazyLoadEntry object.
    */
-  function load( data: LazyLoadImagesData ): void {
-    const { _img } = data;
+  function load( data: LazyLoadEntry ): void {
+    const [ img ] = data;
 
-    addClass( data._Slide.slide, CLASS_LOADING );
-    bind( _img, 'load error', e => { onLoad( data, e.type === 'error' ) } );
+    addClass( data[ 1 ].slide, CLASS_LOADING );
+    bind( img, 'load error', apply( onLoad, data ) );
 
-    [ 'srcset', 'src' ].forEach( name => {
-      if ( data[ name ] ) {
-        setAttribute( _img, name, data[ name ] );
-        removeAttribute( _img, name === 'src' ? SRC_DATA_ATTRIBUTE : SRCSET_DATA_ATTRIBUTE );
-      }
-    } );
+    setAttribute( img, 'src', getAttribute( img, SRC_DATA_ATTRIBUTE ) );
+    setAttribute( img, 'srcset', getAttribute( img, SRCSET_DATA_ATTRIBUTE ) );
+    removeAttribute( img, SRC_DATA_ATTRIBUTE );
+    removeAttribute( img, SRCSET_DATA_ATTRIBUTE );
   }
 
   /**
    * Called when the image is loaded or any error occurs.
    *
-   * @param data  - A LazyLoadImagesData object.
-   * @param error - `true` if this method is called on error.
+   * @param data - A LazyLoadEntry object.
+   * @param e    - An Event object.
    */
-  function onLoad( data: LazyLoadImagesData, error: boolean ): void {
-    const { _Slide } = data;
+  function onLoad( data: LazyLoadEntry, e: Event ): void {
+    const [ img, Slide ] = data;
 
-    removeClass( _Slide.slide, CLASS_LOADING );
+    removeClass( Slide.slide, CLASS_LOADING );
 
-    if ( ! error ) {
-      remove( data._spinner );
-      display( data._img, '' );
-      emit( EVENT_LAZYLOAD_LOADED, data._img, _Slide );
+    if ( e.type !== 'error' ) {
+      remove( data[ 2 ] );
+      display( img, '' );
+      emit( EVENT_LAZYLOAD_LOADED, img, Slide );
       emit( EVENT_RESIZE );
     }
 
-    if ( isSequential ) {
-      loadNext();
-    }
+    isSequential && loadNext();
   }
 
   /**
    * Starts loading a next image.
    */
   function loadNext(): void {
-    if ( index < images.length ) {
-      load( images[ index++ ] );
-    }
+    entries.length && load( entries.shift() );
   }
 
   return {
     mount,
-    destroy,
+    destroy: apply( empty, entries ),
   };
 }

src/js/constructors/RequestInterval/RequestInterval.ts

@@ -1,4 +1,4 @@
-import { raf } from '../../utils';
+import { min, raf } from '../../utils';
 
 
 /**
@@ -63,21 +63,12 @@ export function RequestInterval(
    */
   function update(): void {
     if ( ! paused ) {
-      const elapsed = now() - startTime;
+      rate = min( ( now() - startTime ) / interval, 1 );
+      onUpdate && onUpdate( rate );
 
-      if ( elapsed >= interval ) {
-        rate      = 1;
-        startTime = now();
-      } else {
-        rate = elapsed / interval;
-      }
-
-      if ( onUpdate ) {
-        onUpdate( rate );
-      }
-
-      if ( rate === 1 ) {
+      if ( rate >= 1 ) {
         onInterval();
+        startTime = now();
 
         if ( limit && ++count >= limit ) {
           return pause();
@@ -123,7 +114,7 @@ export function RequestInterval(
    * Cancels the interval.
    */
   function cancel() {
-    cancelAnimationFrame( id );
+    id && cancelAnimationFrame( id );
     rate   = 0;
     id     = 0;
     paused = true;

src/js/core/Splide/Splide.ts

@@ -56,22 +56,22 @@ export class Splide {
   /**
    * The current options.
    */
-  private readonly _options: Options = {};
+  private readonly _o: Options = {};
 
   /**
    * The collection of all components.
    */
-  private _Components: Components;
+  private _C: Components;
 
   /**
    * The collection of extensions.
    */
-  private _Extensions: Record<string, ComponentConstructor> = {};
+  private _E: Record<string, ComponentConstructor> = {};
 
   /**
    * The Transition component.
    */
-  private _Transition: ComponentConstructor;
+  private _T: ComponentConstructor;
 
   /**
    * The Splide constructor.
@@ -93,7 +93,7 @@ export class Splide {
       assert( false, 'Invalid JSON' );
     }
 
-    this._options = Object.create( merge( {}, options ) );
+    this._o = Object.create( merge( {}, options ) );
   }
 
   /**
@@ -110,14 +110,14 @@ export class Splide {
 
     state.set( CREATED );
 
-    this._Components = Components;
-    this._Transition = Transition || this._Transition || ( this.is( FADE ) ? Fade : Slide );
-    this._Extensions = Extensions || this._Extensions;
+    this._C = Components;
+    this._T = Transition || this._T || ( this.is( FADE ) ? Fade : Slide );
+    this._E = Extensions || this._E;
 
-    const Constructors = assign( {}, ComponentConstructors, this._Extensions, { Transition: this._Transition } );
+    const Constructors = assign( {}, ComponentConstructors, this._E, { Transition: this._T } );
 
     forOwn( Constructors, ( Component, key ) => {
-      const component = Component( this, Components, this._options );
+      const component = Component( this, Components, this._o );
       Components[ key ] = component;
       component.setup && component.setup();
     } );
@@ -159,7 +159,7 @@ export class Splide {
     splide.splides.push( { splide: this, isParent: true } );
 
     if ( this.state.is( IDLE ) ) {
-      this._Components.Sync.remount();
+      this._C.Sync.remount();
       splide.Components.Sync.remount();
     }
 
@@ -203,7 +203,7 @@ export class Splide {
    * @return `this`
    */
   go( control: number | string ): this {
-    this._Components.Controller.go( control );
+    this._C.Controller.go( control );
     return this;
   }
 
@@ -297,7 +297,7 @@ export class Splide {
    * @return `this`
    */
   add( slides: string | HTMLElement | Array<string | HTMLElement>, index?: number ): this {
-    this._Components.Slides.add( slides, index );
+    this._C.Slides.add( slides, index );
     return this;
   }
 
@@ -308,7 +308,7 @@ export class Splide {
    * @param matcher - An index, an array with indices, a selector string, or an iteratee function.
    */
   remove( matcher: SlideMatcher ): this {
-    this._Components.Slides.remove( matcher );
+    this._C.Slides.remove( matcher );
     return this;
   }
 
@@ -320,7 +320,7 @@ export class Splide {
    * @return `true` if the type matches the current one, or otherwise `false`.
    */
   is( type: string ): boolean {
-    return this._options.type === type;
+    return this._o.type === type;
   }
 
   /**
@@ -347,7 +347,7 @@ export class Splide {
       // Postpones destruction requested before the slider becomes ready.
       EventInterface( this ).on( EVENT_READY, this.destroy.bind( this, completely ) );
     } else {
-      forOwn( this._Components, component => {
+      forOwn( this._C, component => {
         component.destroy && component.destroy( completely );
       }, true );
 
@@ -366,7 +366,7 @@ export class Splide {
    * @return An object with the latest options.
    */
   get options(): Options {
-    return this._options;
+    return this._o;
   }
 
   /**
@@ -375,11 +375,11 @@ export class Splide {
    * @param options - An object with new options.
    */
   set options( options: Options ) {
-    const { _options } = this;
-    merge( _options, options );
+    const { _o } = this;
+    merge( _o, options );
 
     if ( ! this.state.is( CREATED ) ) {
-      this.emit( EVENT_UPDATED, _options );
+      this.emit( EVENT_UPDATED, _o );
     }
   }
 
@@ -389,7 +389,7 @@ export class Splide {
    * @return The number of slides.
    */
   get length(): number {
-    return this._Components.Slides.getLength( true );
+    return this._C.Slides.getLength( true );
   }
 
   /**
@@ -398,6 +398,6 @@ export class Splide {
    * @return The active slide index.
    */
   get index(): number {
-    return this._Components.Controller.getIndex();
+    return this._C.Controller.getIndex();
   }
 }