title: Trying to implement lazyload 'fade in' but it doesn't seem to work correctly
body: <p>I'm using this plugin to lazyload images on my site: <a href="https://github.com/verlok/lazyload/blob/master/demos/fade_in.html" rel="nofollow noreferrer">https://github.com/verlok/lazyload/blob/master/demos/fade_in.html</a></p>
  
  <p>Lazyload seems to initialise but I can't get the fade in effect as seen in the link above. The site I'm using it on is <a href="https://deannoble.com.au" rel="nofollow noreferrer">deannoble.com.au</a></p>
  
  <p><strong>In the html, i'm using data-src on images:</strong></p>
  
  <pre><code>&lt;img data-src="images/thumb-4.jpg" class="img-fluid works" alt="img"/&gt;
  </code></pre>
  
  <p><strong>My CSS is:</strong></p>
  
  <pre><code>img:not(.initial) {
      transition: opacity 3s;
  }
  img.initial,
  img.loaded,
  img.fluid,
  img.works,
  img.error {
      opacity: 1;
  }
  
  img:not([src]) {
      visibility: hidden;
  }
  </code></pre>
  
  <p><strong>and my js is:</strong></p>
  
  <pre><code>(function() {
      function logElementEvent(eventName, element) {
          console.log(Date.now(), eventName, element.getAttribute("data-src"));
      }
  
      var callback_enter = function(element) {
          logElementEvent(" ENTERED", element);
      };
      var callback_exit = function(element) {
          logElementEvent(" EXITED", element);
      };
      var callback_loading = function(element) {
          logElementEvent("⌚ LOADING", element);
      };
      var callback_loaded = function(element) {
          logElementEvent(" LOADED", element);
      };
      var callback_error = function(element) {
          logElementEvent(" ERROR", element);
          element.src = "https://via.placeholder.com/440x560/?text=Error+Placeholder";
      };
      var callback_finish = function() {
          logElementEvent("✔️ FINISHED", document.documentElement);
      };
      var callback_cancel = function (element) {
          logElementEvent(" CANCEL", element);
      };
  
      var ll = new LazyLoad({
          threshold: 0,
          cancel_on_exit: true,
          // Assign the callbacks defined above
          callback_enter: callback_enter,
          callback_cancel: callback_cancel,
          callback_exit: callback_exit,
          callback_loading: callback_loading,
          callback_loaded: callback_loaded,
          callback_error: callback_error,
          callback_finish: callback_finish
      });
  })();
  </code></pre>
  
  <p>Any tips here would be great! Thank you.</p>