页面还未加载完成显示loading

article/2025/10/6 21:23:05

页面未加载完成,显示loading的图标

html代码

<div id="loading"><i></i>
</div>

css  代码
#loading{width: 100%;height: 100%;background-color: #fff;position: fixed;top:0;left: 0;z-index: 9999;
}#loading >i{width: 64px;height: 64px;position: absolute;top:0;bottom:0;left:0;right: 0;margin: auto;background: url("/images/loading.gif") no-repeat;}

js代码
document.onreadystatechange = function () {if(document.readyState === "complete"){$("#loading").fadeOut();}
}
推荐一款loading图标的网站,可以自己配置颜色背景色
https://icons8.com/preloaders/

欢迎关注我的个人技术公众号!javascript艺术



http://chatgpt.dhexx.cn/article/hbnOL96m.shtml

相关文章

浏览器加载页面的过程

开源浏览器一般以8k每块下载html页面。 1、然后解析页面生成DOM树&#xff0c; 2、遇到css标签或JS脚本标签就新起线程去下载他们&#xff0c;并继续构建DOM。 3、下载完后解析CSS为CSS规则树&#xff0c;浏览器结合CSS规则树和DOM树生成Render Tree。 注意&#xff1a;构建…

浏览器加载网页过程

1.概要&#xff1a;从用户在浏览器输入域名开始&#xff0c;到web页面加载完毕&#xff0c;这个过程叫做网页加载过程&#xff0c;个人总结&#xff0c;长期更新 2.分析&#xff1a;打开一个网页&#xff0c;浏览器会因为页面上的css/js/image等静态资源多次发起连接请求&#…

登录页面加载效果

说明&#xff1a;我们在做后台管理系统的时候&#xff0c;都会有一个登录页面&#xff0c;有的时候网速比较慢&#xff0c;登录速度比较慢&#xff0c;有的用户就会一直点登录按钮&#xff08;图1&#xff09;&#xff0c;体验不是特别好&#xff0c;基于此&#xff0c;优化一下…

加载页面的几种方法

通常js中的方法是window.onload方法&#xff0c;但是&#xff0c;这有一个缺点&#xff0c;就是当出现多个加载事件时&#xff0c;后面的内容会直接覆盖前面的内容&#xff0c;譬如拿控制台输出为例子&#xff1a; window.onload function () {console.log("BOM方法1&quo…

js重新加载页面的方法

方法/步骤 1、window.location.reload()&#xff0c;刷新页面&#xff0c;不重复提交页面。 2、window.location.hrefwindow.location.href,刷新页面&#xff0c;不重复提交页面。 3、location location 4、location.replace(location.href),刷新页面&#xff0c;不重复…

页面加载的过程

1、创建Document对象&#xff0c;开始解析web页面。解析HTML元素和他们的文本内容后添加Element对象和Text节点到文档中。这个阶段document.readyState ‘loading’。 2、遇到link外部css&#xff0c;创建线程加载&#xff0c;并继续解析文档。 3、遇到script外部js&#xf…

HTML 页面加载过程

window.onload 和 DOMContentLoaded 的区别从输入 url 到得到 html 的过程浏览器渲染页面的过程 window.onload 和 DOMContentLoaded 的区别 DOMContentLoaded&#xff1a;DOM结构加载完毕window.onload&#xff1a;DOM结构和静态资源加载完毕 从输入 url 到得到 html 的过程 …

html运行页面一直处在加载状态的解决

前两天在制作一个页面的时候&#xff0c;发现左上方浏览器一直在加载&#xff0c;如下图所示&#xff1a; 并且我的一些图片也不显示了 查看代码&#xff0c;引用图片整合部分的图片路径出现错误&#xff1a; 改正如下&#xff1a; 重新运行界面&#xff1a; 界面运行完毕&am…

页面预加载

目录 一、<link> 标签预加载1、<link> 标签的 preload 属性的属性介绍2、避免滥用 preload3、避免混用 preload 和 prefetch&#xff08;1&#xff09;、preload&#xff08;2&#xff09;、prefetch 4、避免错用 preload 加载跨域资源5、defer 与 async 二、JavaS…

HTML页面的加载

HTML页面的加载实际上是基于http过程浏览器对数据的解析渲染。 http协议的请求过程是基于TCP协议的。http是要基于TCP连接基础上&#xff0c;简单的说&#xff0c;TCP单纯建立连接&#xff0c;不涉及任何我们需要请求的实际数据&#xff0c;简单的传输。http基于TCP建立的连接…

Redis集群原理详解

一、Redis集群介绍&#xff1a; 1、为什么需要Redis集群&#xff1f; 在讲Redis集群架构之前&#xff0c;我们先简单讲下Redis单实例的架构&#xff0c;从最开始的一主N从&#xff0c;到读写分离&#xff0c;再到Sentinel哨兵机制&#xff0c;单实例的Redis缓存足以应对大多数…

2022.4.7网页一直在加载中,无提示

项目场景&#xff1a; 项目中有一个查看一些数据的页面&#xff0c;点击“查看详情”按钮&#xff0c;可以进入这个页面&#xff0c;查看详情信息。 问题描述 点击“查看详情”按钮&#xff0c;页面一直在加载中&#xff0c;页面没有相关提示。 原因分析&#xff1a; 再次点…

softmax layer

一张图&#xff0c;简单易懂、清晰明了。

softmax中axis参数

从caffe中我们看到softmax有下面这些参数 // Message that stores parameters used by SoftmaxLayer, SoftmaxWithLossLayer message SoftmaxParameter {enum Engine {DEFAULT 0;CAFFE 1;CUDNN 2;}optional Engine engine 1 [default DEFAULT];// The axis along which t…

Softmax回归

softmax回归学习笔记&#xff1a; 分类问题&#xff1a; 假设数据集图像高和宽均为2像素&#xff0c;色彩为灰度。 例&#xff1a; 数据集真实标签&#xff1a; 狗 y1 猫 y2 鸡 y3 softmax回归模型&#xff1a; softmax回归和线性回归都需要将输入特征与权重做线性叠加。不同的…

softmax函数

输出层的设计 神经网络可以用在分类问题和回归问题上&#xff0c;不过需要根据情况改变输出层的激活函数。一般而言&#xff0c;回归问题用恒等函数&#xff0c;分类问题用softmax函数。机器学习的问题大致可以分为分类问题和回归问题。分类问题是数据属于哪一个类别的问题。比…

输出层的激活函数——softmax函数

概括 机器学习的问题大致可以分为分类问题和回归问题。分类问题是数据属于哪一个类别的问题。比如&#xff0c;区分图像中的人是男性还是女性的问题就是分类问题。而回归问题是根据某个输入预测一个&#xff08;连续的&#xff09;数值的问题。比如&#xff0c;根据一个人的图…

Softmax

又搬了个蒸馏相关~~ 神经网络中的蒸馏技术 “模型集成是一个相当有保证的方法&#xff0c;可以获得2%的准确性。“ —— Andrej Karpathy我绝对同意&#xff01;然而&#xff0c;部署重量级模型的集成在许多情况下并不总是可行的。有时&#xff0c;你的单个模型可能太大(例如G…

初探softmax

什么是softmax Softmax,又称作归一化指数函数。主要用于分类任务&#xff0c;降多分类的结果以概率的形式展现 下图展示softmax计算方法 softmax本质上是归一化网络&#xff0c;目的是将多个标量映射为一个概率分布,其输出的每一个值范围在&#xff08;0&#xff0c;1&#x…

神经网络之softmax(作用,工作原理【示例说明】,损失计算)

1、softmax作用 softmax将输出的分类结果映射到&#xff08;0-1&#xff09;之间&#xff0c;将神经网络的分类结果转化成对应的概率。不同的概率&#xff0c;表示此样本属于对应类别的可能性大小&#xff0c;概率越大&#xff0c;样本属于该分类的可能性越大。概率的总和为1。…