javascript - 在页面上的一张图像上淡入效果。

Question

我的网页上有一张图片。图像不是背景，但它几乎覆盖了页面的 30%。并且图像对于网页（200KB）来说很大。因此，当图像完成加载时，它只会在看起来非常难看的页面上闪烁。所以我希望图像在网页上完全下载后淡入。由于图像的背景颜色和网页的背景颜色相同，它看起来像一个很好的动画。好像只有图像的内容正在淡入。有什么可能的吗？

Answer 1

由于您使用的是这么大的图像，我将假设它是 JPG。假设您不在移动设备上并且它正在闪烁，我还将假设它是基准 JPG。哇，这是很多假设:)

我建议使用渐进式 JPG，它会在加载粗略形式的内容的同时加载。它将逐步增强自身的层次，直到达到完整的质量。

您还可以将其包装在相同尺寸的 div 中，以防止您的内容四处乱跳。

如果你想让它淡入，你可以添加 display:none; 给您图像并在文档上使用 jquery 准备好使用 fadeIn 方法。

img {
    height:400px;
    width:400px;
    display:none;
}​

<img id="myimg" src="http://placehold.it/400x400" >​

$(document).ready(function() {
    $('#myimg').fadeIn('fast');
});​