javascript - 加载后如何淡入首屏上方的图像？

Question

我的网站首屏上方有一张大图像，需要几秒钟才能加载，一旦加载，它就会立即出现。有没有办法用 jQuery 捕捉这个动作并让它淡入淡出让它在加载时感觉更好一点？

因此，真正的问题是，onload，有没有办法让我停止使用 jQuery 加载图像，然后使用 fadeIn() 将它们淡入淡出？

Answer 1

您可以通过将其放置在隐藏的 div 中来停止加载图像，然后在加载页面或加载图像时显示它......

在隐藏的 DIV 中放置图像示例：

HTML：

<div class="hidden">
    <img src="path/to/image.jpg" alt="" />
</div>

CSS：

.hidden {
  display: none;
}

jQuery：

$(window).load(function() { 
    $(".hidden").fadeIn();
});

直接在图像上示例：

HTML：

<img class="hidden" src="path/to/image.jpg" alt="" />

CSS：

.hidden {
  display: none;
}

jQuery：

$(".hidden").load(function() { 
    $(this).fadeIn();
});