javascript - 将 Javascript CSS 连接到 CSS

Question

如何使此代码与 CSS 背景图像而不是 html 图像一起工作。

问题是，这是为处理 html 图像而不是 CSS 背景图像而设计的。

使用 CSS 和 JavaScript 预加载

https://perishablepress.com/3-ways-preload-images-css-javascript-ajax/

CSS:

#preload-01 { background: url(http://domain.tld/image-01.png) no-repeat -9999px -9999px; }
    #preload-02 { background: url(http://domain.tld/image-02.png) no-repeat -9999px -9999px; }
    #preload-03 { background: url(http://domain.tld/image-03.png) no-repeat -9999px -9999px; }

Javascript:

function preloader() {
    if (document.getElementById) {
        document.getElementById("preload-01").style.background = "url(http://domain.tld/image-01.png) no-repeat -9999px -9999px";
        document.getElementById("preload-02").style.background = "url(http://domain.tld/image-02.png) no-repeat -9999px -9999px";
        document.getElementById("preload-03").style.background = "url(http://domain.tld/image-03.png) no-repeat -9999px -9999px";
    }
}
function addLoadEvent(func) {
    const oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            if (oldonload) {
                oldonload();
            }
            func();
        }
    }
}
addLoadEvent(preloader);

如何将上述 javascript 代码连接到 CSS 背景图像？

我的 CSS 背景图片代码:

body:after {
  content: "";
  position: absolute;
  left: -9999px;
  top: -9999px;
  background: url(https://i.imgur.com/fOfpsiC.png) no-repeat 0 0, url(https://i.imgur.com/92kMrMf.jpg) no-repeat 0 0, url(https://i.imgur.com/WzHsnG7.png) no-repeat 0 0;
}

这是您单独编写它们的方式:

body:after {
  content: "";
  position: absolute;
  left: -9999px;
  top: -9999px;
  background: url(https://i.imgur.com/fOfpsiC.png) no-repeat 0 0;
}

body:after {
  content: "";
  position: absolute;
  left: -9999px;
  top: -9999px;
  background: url(https://i.imgur.com/92kMrMf.jpg) no-repeat 0 0;
}

body:after {
  content: "";
  position: absolute;
  left: -9999px;
  top: -9999px;
  background: url(https://i.imgur.com/WzHsnG7.png) no-repeat 0 0;
}

此外:所有这些都需要添加

body:after {
  content: "";
  position: absolute;

到这一行:

.style.background = "url(http://domain.tld/image-01.png) no-repeat -9999px -9999px";

Answer 1

Javascript:

function preloader() {
    if (document.getElementById) {
        document.getElementById('preload-01').classList.add('some-class');
        ...
    }
}

CSS:

.some-class:after {
  content: "";
  position: absolute;
  left: -9999px;
  top: -9999px;
  background: url("https://i.imgur.com/fOfpsiC.png") no-repeat 0 0;
}

你是这个意思吗？