JS问题:真实loading 页面加载完在显示页面

Posted 2023-05-13

网上找了好多都是伪loading 设置时间消失的 我想要那种真实的 页面加载完整之后load才消失 我的页面就是静态html 图片较多的那种

if(document.readyState === "complete")
//移除loading效果

此方法所有主流浏览器都支持，放心使用！

参考技术A 一，页面先使用一个div用来显示loading加载效果，图片所在的父类div先隐藏，在jquery中写
$(document).ready(function() //页面加载完成以后才会执行。
这时，loading消失，
图片父类div显示，
)

可以试试看，，

vue加载中loading提示信息(iView Spin)

参考技术A

在一些按钮的点击操作中，假如没有限制，用户多次点击，会向后台发送多次请求。

还有一种情况是：当页面加载时，假如数据没有加载完成，此时为了防止用户进行操作，会显示一个遮罩：加载中...。这个操作和上面差不多，只是触发方式不同，一个是在生命周期中触发，一个是通过用户点击触发

html:

css:

js:

html:

js:

当你使用了遮罩的方式，并且在向后台发送请求之前进行了验证，验证提示是以Message弹窗显示的，当用户多次点击时，会重复出现多次提示信息。

html:

js:

css样式：弹窗遮罩层在拉滚动条发现遮罩层没铺满屏幕
解决方式：把 absolute 换成 fixed
iview样式源码：

更改为 position: fixed;
自己写遮罩的话，原理也是相同。

网站导航