Add onreplaceCallback that can be used to handle the replacement imag…

…e between replacement and the onload event
fhopeman · Nov 2, 2016 · 72ad2a8 · 72ad2a8
1 parent 2736f23
commit 72ad2a8
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 4 deletions.
diff --git a/spec/imgSpec.js b/spec/imgSpec.js
@@ -236,6 +236,28 @@ describe("justlazy should lazy load span", function () {
         });
     });
 
+    it("and invoke onreplace callback", function (done) {
+        var span = testCase("testSpanWithMandatoryAttributesOnly", withElements("span"))[0];
+
+        expect(span).not.toHaveAttr("data-some-test-attr");
+
+        Justlazy.lazyLoad(span, {
+            onloadCallback: function () {
+
+            },
+            onerrorCallback: function () {
+                fail();
+            },
+            onreplaceCallback: function () {
+                this.setAttribute("someOtherKey", "someOtherValue");
+                var img = testCase("testSpanWithMandatoryAttributesOnly", withElements("img"))[0];
+                expect(img).toExist();
+                expect(img).toHaveAttr("someOtherKey", "someOtherValue");
+                done();
+            }
+        });
+    });
+
     it("and invoke onload callback", function (done) {
         var span = testCase("testSpanWithMandatoryAttributesOnly", withElements("span"))[0];
 

diff --git a/src/justlazy.js b/src/justlazy.js
@@ -23,16 +23,18 @@
      * @param {Object} imgPlaceholder Placeholder element of the img to lazy load.
      * @param {Object} imgAttributes Attributes of the image which will be created.
      * @param {Function} onloadCallback Optional onload callback function.
+     * @param {Function} onreplaceCallback Optional onreplace callback function.
      *
      */
-    var _createImage = function(imgPlaceholder, imgAttributes, onloadCallback) {
+    var _createImage = function(imgPlaceholder, imgAttributes, onloadCallback, onreplaceCallback) {
         var img = document.createElement("img");
 
         img.onload = function() {
             if (!!onloadCallback) {
                 onloadCallback.call(img);
             }
         };
+
         if (!!imgAttributes.title) {
             img.title = imgAttributes.title;
         }
@@ -42,22 +44,27 @@
         if (!!imgAttributes.srcset) {
             img.setAttribute("srcset", imgAttributes.srcset);
         }
+
         img.alt = imgAttributes.alt;
         img.src = imgAttributes.src;
 
-        _replacePlaceholderWithImage(imgPlaceholder, img);
+        _replacePlaceholderWithImage(imgPlaceholder, img, onreplaceCallback);
     };
 
     /**
      * Replaces the img placeholder (html node of any type) with the img.
      *
      * @param {Object} imgPlaceholder Image placeholder html node.
      * @param {Object} img Image node itself.
+     * @param {Function} onReplaceCallback Optional onReplace callback function.
      */
-    var _replacePlaceholderWithImage = function(imgPlaceholder, img) {
+    var _replacePlaceholderWithImage = function(imgPlaceholder, img, onreplaceCallback) {
         var parentNode = imgPlaceholder.parentNode;
         if (!!parentNode) {
             parentNode.replaceChild(img, imgPlaceholder);
+            if (!!onreplaceCallback) {
+                onreplaceCallback.call(img);
+            }
         }
     };
 
@@ -95,13 +102,15 @@
      *                                 Optional error handler which is invoked if the
      *                                 replacement of the lazy placeholder fails (e.g. mandatory
      *                                 attributes missing).
+     *                           - onreplaceCallback:
+     *                                 Optional callback which is invoked after the image placeholder is replaced with the image
      */
     var lazyLoad = function(imgPlaceholder, options) {
         var imgAttributes = _resolveImageAttributes(imgPlaceholder);
         options = _validateOptions(options);
 
         if (!!imgAttributes.src && (!!imgAttributes.alt || imgAttributes.alt === "")) {
-            _createImage(imgPlaceholder, imgAttributes, options.onloadCallback);
+            _createImage(imgPlaceholder, imgAttributes, options.onloadCallback, options.onreplaceCallback);
         } else {
             if (!!options.onerrorCallback) {
                 options.onerrorCallback.call(imgPlaceholder);