时间戳

首页 > 解决方案 > jQuery 窗口加载可以是纯 javascript 吗？

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

问题描述

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

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

这是我的代码

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

标签： javascriptjquery

解决方案

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 会做的事情相匹配，但总有可能出错。

推荐阅读