CSS 使用CSS而不是Javascript来预加载图像

Posted 2021-05-23

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS 使用CSS而不是Javascript来预加载图像相关的知识，希望对你有一定的参考价值。

/* CSS3 */
.preload {
    background-image: url(images/image_01.png),
                      url(images/image_02.png),
                      url(images/image_03.png),
                      url(images/image_04.png),
                      url(images/image_05.png);
    background-position: -9999px -9999px;
    background-repeat: no-repeat;
}

/* CSS2 */
.preload-01{ background: url(images/image_01.png) no-repeat -9999px -9999px;}
.preload-02{ background: url(images/image_02.png) no-repeat -9999px -9999px;}
.preload-03{ background: url(images/image_03.png) no-repeat -9999px -9999px;}
.preload-04{ background: url(images/image_04.png) no-repeat -9999px -9999px;}
.preload-05{ background: url(images/image_05.png) no-repeat -9999px -9999px;}

以上是关于CSS 使用CSS而不是Javascript来预加载图像的主要内容，如果未能解决你的问题，请参考以下文章

库魔法。 text/plain 而不是 text/javascript text/css

javascript 找到应用于特定元素的所有CSS规则;并检查样式表中是否定义了特定元素的CSS属性 - 而不是

在运行时确定浏览器是不是太慢而无法优雅地处理复杂的 JavaScript/CSS 的最佳方法是啥？

使用 JavaScript 动态应用 CSS

通过 jQuery/Javascript 添加悬停 CSS 属性