如何在加载后淡入首屏图像

How to fade in images that are above the fold once they load?

本文关键字：图像 淡入 加载      更新时间：2023-09-26

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

因此，真正的问题是，onload，有没有办法阻止图像加载jQuery，然后用fadeIn((轻轻淡入

？
您可以通过将

图像放置在隐藏的div中来阻止图像加载，并且可以在加载页面或加载图像时显示它...

将图像放置在隐藏分区示例中：

.HTML：

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

.CSS：

.hidden {
  display: none;
}

j查询：

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

直接在图像上示例：

.HTML：

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

.CSS：

.hidden {
  display: none;
}

j查询：

$(".hidden").load(function() { 
    $(this).fadeIn();
});
相关文章：