仅当完全加载时才显示图像没有JavaScript

Question

如何在不使用插件或JavaScript的情况下完全加载图像时显示图像？有没有办法在纯CSS3/HTML5中做到这一点？

Answer 1

你可以base64 -encode图片和它们嵌入到HTML：

<img src="data:image/png;base64,{REPLACE_THIS_WITH_YOUR_BASE64_STRING}"> 

纯CSS3/HTML5解决方案不可用。

Answer 2

怎么样使用CSS关键帧和延迟。它不是完美的，因为你不能只使用CSS检测页面加载或HTML你需要的js

img { 
-webkit-animation: fadein 1s 3s forwards; 
    -moz-animation: fadein 1s 3s forwards; 
    -ms-animation: fadein 1s 3s forwards; 
    -o-animation: fadein 1s 3s forwards; 
     animation: fadein 1s 3s forwards; 
} 

@keyframes fadein { 
    from { opacity: 0; } 
    to { opacity: 1; } 
} 
@-moz-keyframes fadein { 
    from { opacity: 0; } 
    to { opacity: 1; } 
} 
@-webkit-keyframes fadein { 
    from { opacity: 0; } 
    to { opacity: 1; } 
} 
@-ms-keyframes fadein { 
    from { opacity: 0; } 
    to { opacity: 1; } 
} 
@-o-keyframes fadein { 
    from { opacity: 0; } 
    to { opacity: 1; } 
} 

http://jsfiddle.net/matt3224/Bp9v7/