我有一个加载繁重的 Javascript 脚本，我注意到在较慢的配置中，脚本确实在 html 标记后加载，这使我的页面无法正常工作。
首先加载 javascript，然后加载 html 标记解决了我的问题。
我找到了简单的方法来做到这一点：
Javascript :
jQuery(document).ready(function ($) {
$(window).load(function () {
setTimeout(function(){
$('#preloader').fadeOut('slow', function () {
});
},2000);
});
});
html :
<div id="preloader"></div>
<p>EXEMPLE</p>
最后是 css ：
#preloader {
position: fixed;
left: 0;
top: 0;
z-index: 999;
width: 100%;
height: 100%;
overflow: visible;
background: #333 url('//cdnjs.cloudflare.com/ajax/libs/file-uploader/3.7.0/processing.gif') no-repeat center center;
}
http://jsfiddle.net/harshdand/593Lqqnm/2/
虽然它是jQuery。我想在 vanilla JS 中做同样的事情，因为我不精通 jQuery 并且出于性能原因。
有人可以以任何方式向我展示与脚本等效的 vanilla JS 或更好的方式吗？
(document).ready一旦 DOM 完全加载，您使用的就会被触发。在您的情况下，正如您所提到的，这意味着您的 JS 也已加载。
所以基本上你正在查看 DOM 以查看是否加载了 JS。我认为更好的解决方案是直接查看 JS，从中确定您可以删除预加载器。
但要回答你的问题，香草等价物可能是这样的：
根据youmightnotneedjquery.com，您可以用以下内容替换该(document).ready部分：
function ready(fn) {
if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
fn();
} else {
document.addEventListener('DOMContentLoaded', fn);
}
}
您可以使用它来触发不透明度的 CSS 更改，并在不透明度动画完成后完全删除元素。
var target = document.getElementById('preloader');
target.style.opacity = '0';
setTimeout(function(){target.parentNode.removeChild(target);}, 1000);
为了使不透明度很好地消失，您需要在 CSS 中向预加载器添加过渡：
-webkit-transition: opacity 1000ms linear;
transition: opacity 1000ms linear;
只需确保 CSS 中的动画与 JS 中的超时时间相同。完整的代码是这样的：http : //jsfiddle.net/8ua69dbL/10/
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句