Merge branch 'release/18.0.0'

CHANGELOG.md

@@ -1,5 +1,13 @@
 # CHANGELOG
 
+## Version 18
+
+#### 18.0.0
+
+- **Dropped support for Internet Explorer 11**
+- Modernized code
+- Smaller file
+
 ## Version 17
 
 #### 17.9.0

README.md

@@ -175,7 +175,8 @@ Please note that the video poster can be lazily loaded too.
 
 ## 👩‍💻 Getting started - Script
 
-The latest, recommended version of LazyLoad is **17.9.0**.
+The latest, recommended version of LazyLoad is **18.0.0**.
+Note that if you need to support Internet Explorer 11, you need to use version 17.9.0 or below.
 
 Quickly understand how to upgrade from a previous version reading the [practical upgrade guide](UPGRADE.md).
 
@@ -184,7 +185,7 @@ Quickly understand how to upgrade from a previous version reading the [practical
 The easiest way to use LazyLoad is to include the script from a CDN:
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.9.0/dist/lazyload.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@18.0.0/dist/lazyload.min.js"></script>
 ```
 
 Then, in your javascript code:
@@ -225,7 +226,7 @@ Then include the script.
 ```html
 <script
   async
-  src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.9.0/dist/lazyload.min.js"
+  src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@18.0.0/dist/lazyload.min.js"
 ></script>
 ```
 
@@ -259,7 +260,7 @@ Then include the script.
 ```html
 <script
   async
-  src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@17.9.0/dist/lazyload.min.js"
+  src="https://cdn.jsdelivr.net/npm/vanilla-lazyload@18.0.0/dist/lazyload.min.js"
 ></script>
 ```
 
@@ -269,8 +270,6 @@ Now you'll be able to call its methods, like:
 lazyLoadInstance.update();
 ```
 
-Note about Internet Explorer: because this technique uses a `CustomEvent` to trigger the `LazyLoad::Initialized` event, you might want to add [this polyfill](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent#Polyfill) to make it work on Internet Explorer.
-
 [DEMO](https://verlok.github.io/vanilla-lazyload/demos/async.html) - [SOURCE](https://github.com/verlok/vanilla-lazyload/blob/master/demos/async.html) &larr; for a single LazyLoad instance
 
 [DEMO](https://verlok.github.io/vanilla-lazyload/demos/async_multiple.html) - [SOURCE](https://github.com/verlok/vanilla-lazyload/blob/master/demos/async_multiple.html) &larr; for multiple LazyLoad instances
@@ -859,6 +858,6 @@ Using the `restoreAll()` method, you can make LazyLoad restore all DOM manipulat
 
 ## Tested on real browsers
 
-Legacy browsers support is from IE 9 up. This script is tested in every browser before every release using [BrowserStack](http://browserstack.com/) live, thanks to the BrowserStack Open Source initiative.
+This script is tested in every browser before every release using [BrowserStack](http://browserstack.com/) live, thanks to the BrowserStack Open Source initiative.
 
 <a href="http://browserstack.com/"><img alt="BrowserStack Logo" src="./img/browserstack-logo-600x315.png"  width="300" height="158"/></a>

dist/lazyload.amd.js

@@ -17,8 +17,6 @@ define(function () { 'use strict';
 
   var runningOnBrowser = typeof window !== "undefined";
   var isBot = runningOnBrowser && !("onscroll" in window) || typeof navigator !== "undefined" && /(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent);
-  var supportsIntersectionObserver = runningOnBrowser && "IntersectionObserver" in window;
-  var supportsClassList = runningOnBrowser && "classList" in document.createElement("p");
   var isHiDpi = runningOnBrowser && window.devicePixelRatio > 1;
 
   var defaultSettings = {
@@ -167,24 +165,22 @@ define(function () { 'use strict';
   };
 
   var addClass = function addClass(element, className) {
-    if (className === "") {
+    if (!runningOnBrowser) {
       return;
     }
-    if (supportsClassList) {
-      element.classList.add(className);
+    if (className === "") {
       return;
     }
-    element.className += (element.className ? " " : "") + className;
+    element.classList.add(className);
   };
   var removeClass = function removeClass(element, className) {
-    if (className === "") {
+    if (!runningOnBrowser) {
       return;
     }
-    if (supportsClassList) {
-      element.classList.remove(className);
+    if (className === "") {
       return;
     }
-    element.className = element.className.replace(new RegExp("(^|\\s+)" + className + "(\\s+|$)"), " ").replace(/^\s+/, "").replace(/\s+$/, "");
+    element.classList.remove(className);
   };
 
   var addTempImage = function addTempImage(element) {
@@ -669,7 +665,7 @@ define(function () { 'use strict';
     observeElements(observer, elementsToObserve);
   };
   var setObserver = function setObserver(settings, instance) {
-    if (!supportsIntersectionObserver || shouldUseNative(settings)) {
+    if (shouldUseNative(settings)) {
       return;
     }
     instance._observer = new IntersectionObserver(function (entries) {
@@ -733,7 +729,7 @@ define(function () { 'use strict';
       var settings = this._settings;
       var elementsToLoad = getElementsToLoad(givenNodeset, settings);
       setToLoadCount(this, elementsToLoad.length);
-      if (isBot || !supportsIntersectionObserver) {
+      if (isBot) {
         this.loadAll(elementsToLoad);
         return;
       }

dist/lazyload.esm.js

@@ -4,10 +4,6 @@ const isBot =
   (runningOnBrowser && !("onscroll" in window)) ||
   (typeof navigator !== "undefined" && /(gle|ing|ro)bot|crawl|spider/i.test(navigator.userAgent));
 
-const supportsIntersectionObserver = runningOnBrowser && "IntersectionObserver" in window;
-
-const supportsClassList = runningOnBrowser && "classList" in document.createElement("p");
-
 const isHiDpi = runningOnBrowser && window.devicePixelRatio > 1;
 
 const defaultSettings = {
@@ -140,25 +136,23 @@ const safeCallback = (callback, arg1, arg2, arg3) => {
 };
 
 const addClass = (element, className) => {
-  if (className === "") {
+  if (!runningOnBrowser) {
     return;
   }
-  if (supportsClassList) {
-    element.classList.add(className);
+  if (className === "") {
     return;
   }
-  element.className += (element.className ? " " : "") + className;
+  element.classList.add(className);
 };
 
 const removeClass = (element, className) => {
-  if (className === "") {
+  if (!runningOnBrowser) {
     return;
   }
-  if (supportsClassList) {
-    element.classList.remove(className);
+  if (className === "") {
     return;
   }
-  element.className = element.className.replace(new RegExp("(^|\\s+)" + className + "(\\s+|$)"), " ").replace(/^\s+/, "").replace(/\s+$/, "");
+  element.classList.remove(className);
 };
 
 const addTempImage = (element) => {
@@ -676,7 +670,7 @@ const updateObserver = (observer, elementsToObserve) => {
 };
 
 const setObserver = (settings, instance) => {
-  if (!supportsIntersectionObserver || shouldUseNative(settings)) {
+  if (shouldUseNative(settings)) {
     return;
   }
   instance._observer = new IntersectionObserver((entries) => {
@@ -738,7 +732,7 @@ LazyLoad.prototype = {
     const elementsToLoad = getElementsToLoad(givenNodeset, settings);
     setToLoadCount(this, elementsToLoad.length);
 
-    if (isBot || !supportsIntersectionObserver) {
+    if (isBot) {
       this.loadAll(elementsToLoad);
       return;
     }