JavaScript없이 완전히로드 된 이미지 만 표시

Question

이미지가 플러그인이나 JavaScript를 사용하지 않고 완전히로드 된 경우 어떻게 표시합니까? 순수한 CSS3/HTML5에서이 작업을 수행 할 수있는 방법이 있습니까?

Answer 1

당신은 사진 -encode base64과는 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/

필요