Revert "Fix lazy loading of responsive images" (#254)

This reverts commit 1ee5c27.

src/cloudinary.js

@@ -24,8 +24,7 @@ import {
   removeAttribute,
   setAttribute,
   setData,
-  width,
-  isIntersectionObserverSupported
+  width
 } from './util';
 //
 
@@ -687,7 +686,7 @@ class Cloudinary {
               setUrl = false;
             }
           }
-          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){
             // If data-width exists, set width to be data-width
             this.setAttributeIfExists(elements[0], 'width', 'data-width');
@@ -715,6 +714,22 @@ class Cloudinary {
     }
   }
 
+  /**
+   * 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.
    * @function Cloudinary#transformation

src/util/lazyLoad.js

@@ -12,13 +12,22 @@ export function isIntersectionObserverSupported() {
 }
 
 /**
- * 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
  * @param {function} onIntersect - called when the given element is in view
  */
 export function detectIntersection(el, onIntersect) {
   try {
-    if (!isIntersectionObserverSupported()) {
+    if (isNativeLazyLoadSupported() || !isIntersectionObserverSupported()) {
       // Return if there's no need or possibility to detect intersection
       onIntersect();
       return;

test/spec/automatic/lazy-load-spec.js

@@ -1,10 +1,17 @@
 describe("Lazy Loaded Image", function() {
-  it("should return empty src", function() {
+  it("should return empty src on Firefox", function() {
     cl = cloudinary.Cloudinary.new({cloud_name: 'sdk-test'});
-    let options = {loading: "lazy"};
-    let img = cl.image("sample", options);
+    var img;
+    let options = {loading: "lazy"}
+    img = cl.image("sample", options);
     img.removeAttribute('src');
     cl.cloudinary_update(img, options);
-    expect(img).not.toContain('src');
+
+    if(navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
+      expect(img).not.toContain('src');
+    }
+    if(navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
+      expect(img.getAttribute('src')).toEqual('http://res.cloudinary.com/sdk-test/image/upload/sample');
+    }
   });
 });