lazyload淡入效果

Question

我真的试图执行lazyload效果，从这个伟大的代码添加类似淡入效果：

(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; 
}); 

，我不能，你有怎样的任何建议开始？它的代码从这个作者：

https://github.com/tuupola/jquery_lazyload/blob/2.x/lazyload.js他也有他的git lazyload 1.x版本，但首先它基于jQuery，我想尝试学习一些Javascript，其次1.x关于这一点我想避免，因为它会降低性能滚动事件改变DOM

Answer 1

一切我设置上打破>在Chrome浏览器开发工具属性的修改和刷新页面，这给我设置SRC值出现的第一：

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

这里的关键是entry.target.src = src;其中SRC设置，

其次我设置.lazyload类的不透明度为0，之后我尝试删除类.lazyload并添加类.lazierload使用CSS：

在JavaScript

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

它看起来像：

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

，但它仍然不`吨的工作，src属性仍然设置好的犯规出现类的变化，但过渡效果，图像刚刚加载像lazyload没有这一切额外的代码