Automatically pause/unload media on document visibility changes.

2022-01-27 19:27:24 -08:00
parent 748b4fcf54
commit 87aaa25529
3 changed files with 41 additions and 25 deletions
@@ -39,6 +39,7 @@ export function Lazyload(userOptions?: LazyloadOptionsType): LazyloadType {
    if (options.lazyunloadCallback) {
      unloadEvents.forEach((evt) => carousel.on(evt, lazyunloadHandler));
    }
+    document.addEventListener('visibilitychange', visibilityHandler);
  }

  /**
@@ -51,6 +52,18 @@ export function Lazyload(userOptions?: LazyloadOptionsType): LazyloadType {
    if (options.lazyunloadCallback) {
      unloadEvents.forEach((evt) => carousel.off(evt, lazyunloadHandler));
    }
+    document.removeEventListener('visibilitychange', visibilityHandler);
+  }
+
+  /**
+   * Handle document visibility changes.
+   */
+  function visibilityHandler(): void {
+    if (document.visibilityState == 'hidden' && lazyunloadHandler)  {
+      lazyunloadHandler();
+    } else if (document.visibilityState == 'visible' && lazyloadHandler)  {
+      lazyloadHandler();
+    }
  }

  /**