加载后如何淡化高于图像的图像？

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();
});

直接在IMAGE示例：

HTML：

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

CSS：

.hidden {
  display: none;
}

jQuery的：

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