Question

我正在使用body上的CSS类来停止文档加载时运行的转换。一旦Window加载了JavaScript（没有jQuery），我怎么能删除它？

HTML：

<body class="preload">

的的CSS： 的

.preload * {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
}

这将是jQuery等效*除了我不使用jQuery：

$("window").load(function() {
  $("body").removeClass("preload");
});

Answer 1

这应该可以解决问题：

window.addEventListener(
    'load',
    function load()
    {
        window.removeEventListener('load', load, false);
        document.body.classList.remove('preload');
    },
    false);

使用addEventListener意味着它不会干扰可能由其他lib等附加的任何其他事件侦听器。

一旦事件也被触发，上面的代码将删除事件监听器。

我原本认为事件监听器应该在document，但显然是that doesn't work。

Answer 2

这样的东西应该适用于所有浏览器：

window.onload = function () { document.body.className = ""; }

Drew的回答很好，但在旧版本的IE中classList not supported以及window.addEventListener，如果这很重要的话。{/ p>

使用Javascript加载窗口后删除Body类

2 个答案: