我可以在使用 setAttribute("src") 和 getAttribute("data-src") 加载图像时运行事件吗？

Question

在我的网站上，我创建了一个灯箱，在加载实际图像之前显示图像。这是我加载图片的代码：

function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("slides");
    if (n > slides.length) {slideIndex = 1}
    if (n < 1) {slideIndex = slides.length}
    for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";}
        slides[slideIndex-1].style.display = "block";
        slides[slideIndex-1].setAttribute("src",slides[slideIndex-1].getAttribute("data-src"));
}

<img class="slides" src="img/global/lazyload/lazyload.gif" data-src="img/home/Material_1.png">

基本上我用 data-src 替换了 src。但是，我希望在 data-src 使用 CSS 加载后运行淡入效果。我将如何实施呢？是否有我可以使用的完整或加载“事件”。是否可以使用唯一的javascript？

现在，src 图像会在短时间内快速捕捉到实际图像的大小，然后替换 data-src。

Answer 1

您所关注的事件是 DOM 元素上的 load 事件。

最简单的过渡方法是让一个元素在另一个元素之上淡入视图。下面的示例通过将图像放在背景图像之上并执行 CSS 转换来实现。

let img = document.querySelector('img');

img.addEventListener('load', e => {
  if (img.src !== 'https://picsum.photos/200/300?placeholder') {
    img.classList.add('show');
  }
});

setTimeout(() => {
  img.setAttribute('src', img.getAttribute('data-src'));
}, 500);

.container, .container img {
  width: 200px;
  height: 300px;
}

.fade-in {
  transition: 1s;
  opacity: 0;
}

.show {
  opacity: 1;
}

<div class="container" style="background-image: url('https://picsum.photos/200/300?placeholder')">
  <img class="fade-in" src="https://picsum.photos/200/300?placeholder" data-src="https://picsum.photos/200/300?actual" />
</div>