jQuery 窗口加载可以是纯 javascript 吗？

Question

这个jQuery窗口加载脚本可以转换成纯javascript吗？ 我错了，我在学习 jQuery 之前没有深入研究纯 JavaScript。

我能把这个 jquery 转换成纯 javascript 吗？

这是我的代码

$(window).load(function () {
    $("#loading").fadeOut("fast");
});
$(window).on("beforeunload", function () {
    $("#loading").fadeIn("fast").delay(1000).show();
});

Answer 1

load函数可以换成onload（因为onload已经是全局变量所以报废窗口），$jquery查询选择器函数和document.querySelector一样。 on函数相当于addEventListener函数。

纯js代码是

onload = function () {
    const elem = document.querySelector("#loading");
    var opacity = 1;
    var timer = setInterval(() => {
      opacity -= 50 / 400;
      if( opacity <= 0 )
      {
        clearInterval(timer);
        opacity = 0;
        elem.style.display = "none";
        elem.style.visibility = "hidden";
      }
      elem.style.opacity = opacity;
      elem.style.filter = "alpha(opacity=" + opacity * 100 + ")";
    }, 50); // this part is from https://stackoverflow.com/questions/13733912/javascript-fade-in-fade-out-without-jquery-and-css3
};
addEventListener("beforeunload", function () {
    const elem = document.querySelector("#loading");
    elem.style.opacity = 0;
    elem.style.filter = "alpha(opacity=0)";
    elem.style.display = "inline-block";
    elem.style.visibility = "visible";
    var opacity = 0;
    var timer = setInterval( function() {
      opacity += 50 / 400;
      if( opacity >= 1 )
      {
        clearInterval(timer);
        opacity = 1;
      }
      elem.style.opacity = opacity;
      elem.style.filter = "alpha(opacity=" + opacity * 100 + ")";
    }, 50 ); // this part is also from https://stackoverflow.com/questions/13733912/javascript-fade-in-fade-out-without-jquery-and-css3
    setTimeout(()=>{elem.style.display="block";},1000);
});

这一切都应该与 jquery 的功能相匹配，但总有可能出错。