僅當完全加載時才顯示圖像沒有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/