diff --git a/src/cloudinary.js b/src/cloudinary.js index e5d32eb0..c2ce9457 100644 --- a/src/cloudinary.js +++ b/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 diff --git a/src/util/lazyLoad.js b/src/util/lazyLoad.js index 0832440c..b795ba80 100644 --- a/src/util/lazyLoad.js +++ b/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; diff --git a/test/spec/automatic/lazy-load-spec.js b/test/spec/automatic/lazy-load-spec.js index 2890bc2f..84fd3d56 100644 --- a/test/spec/automatic/lazy-load-spec.js +++ b/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'); + } }); });