lazyload fadeIn Effekt basiert auf reinen Javascript

Question

I`m versucht lazyload Wirkung und fügen Sie so etwas wie fadeIn Wirkung von diesem großen Stück Code auszuführen:

(function (root, factory) { 
    if (typeof define === "function" && define.amd) { 
     define([], factory(root)); 
    } else if (typeof exports === "object") { 
     module.exports = factory(root); 
    } else { 
     root.LazyLoad = factory(root); 
    } 
}) (typeof global !== "undefined" ? global : this.window || this.global, function (root) { 

"use strict"; 

const defaults = { 
    src: "data-src", 
    srcset: "data-srcset", 
    selector: ".lazyload" 
}; 

/** 
* Merge two or more objects. Returns a new object. 
* @private 
* @param {Boolean} deep  If true, do a deep (or recursive) merge [optional] 
* @param {Object} objects The objects to merge together 
* @returns {Object}   Merged values of defaults and options 
*/ 
const extend = function() { 

    let extended = {}; 
    let deep = false; 
    let i = 0; 
    let length = arguments.length; 

    /* Check if a deep merge */ 
    if (Object.prototype.toString.call(arguments[0]) === "[object Boolean]") { 
     deep = arguments[0]; 
     i++; 
    } 

    /* Merge the object into the extended object */ 
    let merge = function (obj) { 
     for (let prop in obj) { 
      if (Object.prototype.hasOwnProperty.call(obj, prop)) { 
       /* If deep merge and property is an object, merge properties */ 
       if (deep && Object.prototype.toString.call(obj[prop]) === "[object Object]") { 
        extended[prop] = extend(true, extended[prop], obj[prop]); 
       } else { 
        extended[prop] = obj[prop]; 
       } 
      } 
     } 
    }; 

    /* Loop through each object and conduct a merge */ 
    for (; i < length; i++) { 
     let obj = arguments[i]; 
     merge(obj); 
    } 

    return extended; 
}; 

function LazyLoad(images, options) { 
    this.settings = extend(defaults, options || {}); 
    this.images = images || document.querySelectorAll(this.settings.selector); 
    this.observer = null; 
    this.init(); 
} 

LazyLoad.prototype = { 
    init: function() { 

     /* Without observers load everything and bail out early. */ 
     if (!root.IntersectionObserver) { 
      this.loadImages(); 
      return; 
     } 

     let self = this; 
     let observerConfig = { 
      root: null, 
      rootMargin: "0px", 
      threshold: [0] 
     }; 

     this.observer = new IntersectionObserver(function(entries) { 
      entries.forEach(function (entry) { 
       if (entry.intersectionRatio > 0) { 
        self.observer.unobserve(entry.target); 
        let src = entry.target.getAttribute(self.settings.src); 
        let srcset = entry.target.getAttribute(self.settings.srcset); 
        if ("img" === entry.target.tagName.toLowerCase()) { 
         if (src) { 
          entry.target.src = src; 
         } 
         if (srcset) { 
          entry.target.srcset = srcset; 
         } 
        } else { 
         entry.target.style.backgroundImage = "url(" + src + ")"; 
        } 
       } 
      }); 
     }, observerConfig); 

     this.images.forEach(function (image) { 
      self.observer.observe(image); 
     }); 
    }, 

    loadAndDestroy: function() { 
     if (!this.settings) { return; } 
     this.loadImages(); 
     this.destroy(); 
    }, 

    loadImages: function() { 
     if (!this.settings) { return; } 

     let self = this; 
     this.images.forEach(function (image) { 
      let src = image.getAttribute(self.settings.src); 
      let srcset = image.getAttribute(self.settings.srcset); 
      if ("img" === image.tagName.toLowerCase()) { 
       if (src) { 
        image.src = src; 
       } 
       if (srcset) { 
        image.srcset = srcset; 
       } 
      } else { 
       image.style.backgroundImage = "url(" + src + ")"; 
      } 
     }); 
    }, 

    destroy: function() { 
     if (!this.settings) { return; } 
     this.observer.disconnect(); 
     this.settings = null; 
    } 
}; 

root.lazyload = function(images, options) { 
    return new LazyLoad(images, options); 
}; 

if (window.jQuery) { 
    const $ = window.jQuery; 
    $.fn.lazyload = function (options) { 
     options = options || {}; 
     options.attribute = options.attribute || "data-src"; 
     new LazyLoad($.makeArray(this), options); 
     return this; 
    }; 
} 

return LazyLoad; 
}); 

und ich kann nicht, haben Sie irgendwelche Ratschläge, wie man Anfang? Es ist Code von diesem Autor:

https://github.com/tuupola/jquery_lazyload/blob/2.x/lazyload.js Er hat auch lazyload 1.x Version auf seinem git, aber zuerst basiert es auf jQuery, und ich will versuchen, etwas Javascript und zweitens 1.x zu lernen Ändern DOM auf Scroll-Ereignisse, die ich vermeiden wollen, weil seine Leistung

Answer 1

Zunächst einmal verletzt auf i brechen gesetzt> Attribut Änderungen an Chrom Entwickler-Tools und aktualisieren Sie die Seite, die mir die Einstellung src Wert dort zeigen:

if ("img" === entry.target.tagName.toLowerCase()) { 
    if (src) { 
     entry.target.src = src;    

Der Schlüssel dort ist entry.target.src = src; wo src gesetzt,

zweitens stelle ich Opazität von .lazyload Klasse 0, nachdem es ich versuche Klasse .lazyload zu entfernen und Klasse .lazierload mit CSS hinzufügen:

.lazierload{ 
opacity:1; 
transition: opacity 1s ease; 
} 

in Javascript es so aussieht :

if ("img" === entry.target.tagName.toLowerCase()) { 
    if (src) { 
    entry.target.src = src; 
    entry.target.classList.remove("lazyload") 
    entry.target.classList.add("lazierload"); 
    } 

aber es tut immer noch doesn `t Arbeit wird das src-Attribut noch Klassen Änderungen gefassten aber Übergangseffekt angezeigt wird, werden die Bilder nur, ohne dass dies alle zusätzlichen Code

wie lazyload geladen