Попытка затемнить изображения, когда они загружаются ниже папки

Question

Я использую IntersectionObserver заменить изначально загруженное изображение другим, когда исходное изображение попадает в область просмотра пользователя.

Я хочу, чтобы изображение исчезло, в отличие от прямой замены.

Я попытался добавить загрузчик Jquery к изображению, но он не работает так, как мне бы хотелось.

function fadeIn(obj) {
  $(obj).fadeIn(1000);
}

document.addEventListener("DOMContentLoaded", function() {
  
  var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

  if ("IntersectionObserver" in window) {
  
    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let lazyImage = entry.target;
          $(lazyImage).on('load', fadeIn(lazyImage));
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.srcset = lazyImage.dataset.srcset;
          lazyImage.classList.remove("lazy");
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });

    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<img 
class="lazy" 
src="https://classroomclipart.com/christmas-tree-with-bright-lights-decoration-animated-clipart-motion-lights-gifts-presents-2.gif"
data-src="https://classroomclipart.com/TN_december-happy-holidays_2.jpg"
data-srcset="https://classroomclipart.com/sm-santa-claus-and-reindeer-singing-christmas-carols-clipart.jpg 2x, https://classroomclipart.com/TN_december-happy-holidays_2.jpg 1x"
width="100"
height="100"
>

Answer 1

Вот решение, которое работает прилично хорошо с использованием анимации jQuery: https://jsfiddle.net/ea7fxrL5/

Насколько я могу судить, в вашем текущем коде есть две проблемы:

1. fadeIn Функция на самом деле вызывается до того, как источник изображения изменяется на изображение "TN_de December-happy-holidays_2.jpg", потому что событие загрузки запускается сразу же на пересечении, так как src изображения "рождественская елка" уже загружен.

2. Изображение уже в полной непрозрачности, поэтому оно должно быть скрыто, прежде чем вы сможете добавить его.

Надеюсь это поможет!