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

淡入页面上的其中一个图像。

1 个答案: