Question

如何在不使用插件或JavaScript的情况下完全加载图像？有没有办法在纯CSS3 / HTML5中执行此操作？

Answer 1

您可以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/

仅在没有JavaScript的情况下完全加载时显示图像

2 个答案: