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">

基本上，我将src替换为data-src。但是，一旦使用CSS加载了data-src，我希望运行淡入效果。我将如何实施呢？有没有可以使用的完成或加载的“事件”。可以使用唯一的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>

使用setAttribute（“ src”）和getAttribute（“ data-src”）加载图像后，是否可以运行事件？

1 个答案: