cloudinary-core - npm Package Compare versions

Comparing version 2.11.0 to 2.11.1

package.json

 {
   "name": "cloudinary-core",
-  "version": "2.11.0",
+  "version": "2.11.1",
   "description": "Cloudinary Client Side JS library. Cloudinary streamlines your web application’s image manipulation needs. Cloudinary's cloud-based servers automate image uploading, resizing, cropping, optimizing, sprite generation and more.",
@@ -5,0 +5,0 @@ "main": "cloudinary-core.js",

src/cloudinary.js

@@ -27,4 +27,3 @@ import {normalizeToArray} from "./util/parse/normalizeToArray";
   setData,
-  width,
-  isIntersectionObserverSupported
+  width
 } from './util';
@@ -691,3 +690,3 @@ //
           }
-          const isLazyLoading = (options.loading === 'lazy' && isIntersectionObserverSupported() && !tag.getAttribute('src'));
+          const isLazyLoading = (options.loading === 'lazy' && !this.isNativeLazyLoadSupported() && this.isLazyLoadSupported() && !elements[0].getAttribute('src'));
           if (setUrl || isLazyLoading){
@@ -721,2 +720,18 @@ // If data-width exists, set width to be data-width
   /**
+   * Returns true if Intersection Observer API is supported
+   * @returns {boolean}
+   */
+  isLazyLoadSupported() {
+    return window && 'IntersectionObserver' in window;
+  }
+
+  /**
+   * Returns true if using Chrome
+   * @returns {boolean}
+   */
+  isNativeLazyLoadSupported() {
+    return 'loading' in HTMLImageElement.prototype;
+  }
+
+  /**
    * Returns a {@link Transformation} object, initialized with the specified options, for chaining purposes.
@@ -723,0 +738,0 @@ * @function Cloudinary#transformation

src/util/lazyLoad.js

@@ -15,3 +15,12 @@ /*
 /**
- * Calls onIntersect() when intersection is detected, or when IntersectionObserver isn't supported.
+ * Check if native lazy loading is supported
+ * @return {boolean} true if 'loading' property is defined for HTMLImageElement
+ */
+export function isNativeLazyLoadSupported() {
+  return typeof HTMLImageElement === "object" && HTMLImageElement.prototype.loading;
+}
+
+/**
+ * Calls onIntersect() when intersection is detected, or when
+ * no native lazy loading or when IntersectionObserver isn't supported.
  * @param {Element} el - the element to observe
@@ -22,3 +31,3 @@ * @param {function} onIntersect - called when the given element is in view
   try {
-    if (!isIntersectionObserverSupported()) {
+    if (isNativeLazyLoadSupported() || !isIntersectionObserverSupported()) {
       // Return if there's no need or possibility to detect intersection
@@ -25,0 +34,0 @@ onIntersect();

No alert changes

Improved metrics

Total package byte prevSize

2012163

increased by0.29%

Lines of code

24150

increased by0.31%

No dependency changes