这个 loading 加个循环只执行一次。其他点击不会触发这个事件。可以实现么


setTimeout(function () {
        document.querySelector('.load-box').style.display = 'none'
    }, 4500);
    var _LoadingHtml = '页面加载中，请等待...';
    function completeLoading() {
    if (document.readyState == "complete") {
        var loadingMask = document.getElementById('loadingDiv');
      
        loadingMask.parentNode.removeChild(loadingMask);
    }
}

 -->

.load-box {
      
        background: rgba(0,0,0,.6) url(https://iphoneswallpapers.com/wp-content/uploads/2021/04/Loading-Feelings-iPhone-Wallpaper.jpg) center repeat;
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 99999999999;
    }
<div class="load-box"></div>

加一个全局变量loaded给默认值是false，在代码中判定如果loaded===false,那么就进行调用，调用完成后将loaded=ture。

哈喽，不是很理解你加个循环的意思，可以详细说说嘛

var loading = false;

setTimeout(function(){
    document.querySelector('.load-box').style.display = 'none'
}, 4500);

var _LoadingHtml = '页面加载中，请等待...';

function completeLoading(){
    if(!loading){
        document.getElementById('loadingDiv').remove();
        loading = true;
    }
}

因为你代码给的不全（不明白需求），不明白你想要什么地方加个只执行一次，所以我这里只是把completeLoading函数的效果做成只执行一次了，你可以作为一个参考思路，如果有用请采纳一下谢谢

没看懂题意，什么叫加个循环只执行一次

你是想在网站页面加载之前先显示loading，页面加载完之后隐藏loading吗？
这个加载应该理解为HTML加载完毕，否则你显示loading的时候需要操作页码元素，页面元素都还没有加载完，根本操作不了。
HTML的加载顺序是自上而下，逢山开路遇水搭桥，你可以深入了解一下HTML加载顺序的相关知识，主要是HTML、CSS、JS的执行顺序。
你要想在合适的时机调用你的loading加载，还需要了解一下HTML的生命周期。
你代码里面的if (document.readyState == "complete") ，就是判定加载状态的，complete表示文档和所有子资源已完成加载，表示 load 事件即将被触发。

HTML页面的生命周期有以下三个重要事件：
DOMContentLoaded — 浏览器已经完全加载了HTML，DOM树已经构建完毕，但是像是和样式表等外部资源可能并没有下载完毕。
load — 浏览器已经加载了所有的资源（图像，样式表等）。
beforeunload/unload – 当用户离开页面的时候触发。

每个事件都有特定的用途
DOMContentLoaded – DOM加载完毕，js可以访问所有DOM节点，初始化界面。
load – 附加资源已经加载完毕，可以在此事件触发时获得图像的大小
beforeunload/unload – 用户正在离开页面：可以询问用户是否保存了更改以及是否确定要离开页面。

你可以在DOMContentLoaded里面调用你的loading，如果你用到了DOM元素。

function showLoading() { 
  //显示你的loading
 }

if (document.readyState == 'loading') {
  document.addEventListener('DOMContentLoaded', showLoading);
} else {
  showLoading();
}
window.onload = () =>  loadingMask.parentNode.removeChild(document.getElementById('loadingDiv'));

把这个事件写在onhashchange事件上就可以了，当地址发生变化调用
你的想法就是跳转网页的时候加一个正在加载的画面是吗

你说的是同一个模板里的，只不过打开不同内容是吧，如果是这样的话，你只能是使用cookie记录是否加载，参考以下代码：

window.onload=function(){
        if(!getCookie('loading1')){
            document.querySelector('.load-box').style.display = 'block'
            setCookie('loading1',1)
        }
    }
    //JS操作cookies方法!
//写cookies
function setCookie(name,value)
{
    var Days = 1;//保存一天
    var exp = new Date();
    exp.setTime(exp.getTime() + Days*24*60*60*1000);
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
//读取cookies
function getCookie(name)
{
    var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
    if(arr=document.cookie.match(reg))
        return true;
    else
        return false;
}

记得吧css

.load-box {

    background: rgba(0,0,0,.6) url(https://iphoneswallpapers.com/wp-content/uploads/2021/04/Loading-Feelings-iPhone-Wallpaper.jpg) center repeat;

    width: 100%;

    height: 100%;

    position: fixed;

    top: 0;

    right: 0;

    bottom: 0;

    left: 0;

    z-index: 99999999999;
    display: none;//默认是这个
}