JavaScript控制当页面正在被下载时在页面上显示loading.....的例子

最新推荐文章于 2023-08-21 18:11:28 发布
转载 最新推荐文章于 2023-08-21 18:11:28 发布 · 1.1k 阅读 · 2
文章标签：

#javascript #url #scroll #iframe #layer #html

本文介绍了一种利用HTML与JavaScript实现页面加载时的等待效果的方法。通过设置页面背景与使用脚本控制页面加载行为，确保用户在页面完全加载前看到提示信息。此方法兼容不同浏览器，并能根据不同浏览器特性采用不同技术实现。
<html>
<head>
<title>Loading.....</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="JavaScript">
<!--
var url = 'cn/index.html';
//-->
</script>
</head>
<body scroll="no" bgcolor="#FFFFFF" onLoad="location.href = url">
<div align="center">
<br><br><br><br><br><br><br>
<p><font face="Verdana, Arial, Helvetica, sans-serif" size="2" color="#FF6600">Please wait while loading....</font>
</p>
<p>
<script>
<!--
if (document.layers)
  document.write('<Layer src="' + url + ' " VISIBILITY="hide"> </Layer>');
  else if (document.all || document.getElementById)
   document.write('<iframe src="' + url + '" style="visibility: hidden;"></iframe>');
else location.href = url;
//-->
</script>
</p>
</div>
</body>
</html> 
javascript jQuery $.post $.ajax用法
10-30
JavaScript 和 jQuery 提供了多种方式来执行 AJAX（Asynchronous JavaScript and XML）请求，...在处理复杂的交互或需要更多控制权时，推荐使用 `$.ajax`；而在简单数据提交或快速原型开发时，使用 `$.post` 更为便捷。
vuerouter切换时loading效果实现
08-10
通过使用全局前置守卫，我们可以在路由切换的开始和结束时控制loading的状态。这个过程可以结合Vue的组件系统、事件总线或内置的`$loading`服务来实现，具体取决于项目的实际需求和结构。同时，你可以根据需要调整...
js 下载流文件 显示loading
Future1994的博客
08-21 549
【代码】js 下载流文件 显示loading。
js实现文件下载功能
kaiup的博客
05-14 3万+
一、a标签下载 <body> <button onClick="download()">a标签下载</button> <script> function download(url = 'http:www.xxx.com/download?name=file.pdf', fileName = '未知文件') { const a = document.createElement('a'); a.style.display = '
正在载入中......loading页面的几种方法
热门推荐
JackLiu16的博客
01-24 13万+
　　网页加载过程中提示“载入中…”，特别是使用动画效果，可以一个“等待”的温馨提示，用户体验很不错。下面介绍几种方法。 第一种：　　 原理就是,在网页载入时在页面最中间打入一个层上面显示,"网页正在载入中...."当网页下载完毕,,用JS关闭这个层......。 先在首页HTML最上面...任意位置都行..加入 &lt;div id=loading style="position:a...
在HTML中使用javaScript基础
weixin_68768963的博客
09-12 1001
在HTML中使用javaScript基础代码
【css】sass实现loading动画
坚强的泡沫的博客
03-18 550
index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>使用sass</title> <link href="./sass.css" rel="stylesheet"/> </head> <body> <div class="loading"> <div class
Javascript vue.js表格分页，ajax异步加载数据
10-21
在JavaScript和Vue.js框架中，实现表格分页和AJAX异步加载数据是常见的需求，尤其是在处理大量数据时，为了提高用户体验，我们会将数据分批加载。以下将详细讲解这个过程。 首先，Vue.js允许我们创建自定义组件，...
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
10-25
loading()函数则用于控制页面上加载图标的状态。 使用ajaxfileupload.js插件能有效解决传统表单上传方式的不便之处，尤其是在需要频繁上传文件且注重用户体验的应用场景下。虽然本文中的示例代码仅展示了一个基本的...
dropload.js插件下拉刷新和上拉加载使用详解
10-19
dropload.js是一个JavaScript插件，它主要实现了网页中的下拉刷新和上拉加载更多功能。它的使用方法可以通过查看其官方文档进行了解，文档链接为：***。这个插件的使用过程大致可以分为三个步骤。 首先，需要下载...
js页面加载实现loading提示效果
蓝关故人
08-16 7067
由于页面在加载过程中请求了很多资源，导致打开过慢，且页面无提示，对用户不友好，测试人员希望增加loading效果。 参考如下步骤可行。 实际项目展示动态loading图有自有的方法，不便贴代码，以下用展示简单语句进行示例： //在页面未加载完毕之前显示的loading效果 var _LoadingHtml = '正在加载中，请稍后。。。'; //呈现loading效果 docu...
HTML中的<head>标签及其内容
Xiaowo
08-24 1万+
head title base meta link script style<head> <head> 标签用于定义文档的头部，它是所有头部元素的容器。 <head> 中的元素可以： - 引用脚本 - 指示浏览器在哪里找到样式表 - 提供元信息 - 等等 文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真
html页面LOADING
weixin_33747129的博客
03-04 328
first: &lt;form name=loading&gt;&lt;p&gt;&lt;font color="7285CF"&gt;正在载入，请稍候.......&lt;/font&gt;&lt;/p&gt;&lt;p&gt; &lt;input type=text name=chart size=46 style="font-family:Arial; font-we
18种各式各样的loading，纯html5+css3无图片
mrtuzi的专栏
12-01 3687
网友总结的18种各式各样的loading，纯html5+css3无图片，我再次整理下 <!DOCTYPE html> <html lang='zh_CN'> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-s...
css实现加载中loading动画效果
popstarqq的博客
10-27 1万+
1 效果 2 实现原理 原理很简单： 1 设置100px宽高的div，再设置成圆形border-radius：50%； 2 设置border一定宽度和颜色，再设置border-left为同样宽度和另一种颜色； 3 设置animation动画，让div旋转起来就可以；通过from和to设置旋转角度即可 3全部代码: <!DOCTYPE html> <html> <head> <title>css实现加载中loading动画效果&lt.
js实现下载（文件流、文件链接）
qq_32886245的博客
07-13 6512
js实现下载（文件流、文件链接）
chrome浏览器JavaScript被禁用，并且修改无效怎么办？
ALF2333的博客
05-06 4918
卸载重装！！！ 首先描述一下事情的经过，正常使用电脑，因为使用时间不连续，所以没有关机，电脑是睡眠状态。由于同学要我下载一个视频，这时候，我发现chrome打开的界面是没有图片和视频的，并且在地址栏的右侧，有禁用的标签。 常规操作是点禁用标签，并且将其切换为允许使用JavaScript就能够修改过来。 但是，神奇的事情发生了，我完全没有办法选择这个按钮。 当我进入到chrome://settings/content/javascript里，我也没有办法修改。 接下来，我使用Fn+F12进入了settin
自定义指令下载文件
lz021125的博客
02-09 139
下载文件
layer.js页面美化用法实例解析
Layer.js 是一个轻量级的弹出层组件，它用于在网页中实现模态框（Modal）、提示框（Tip）、页面覆盖层（Overlay）等多种类型的弹出层效果。由于描述中提及是旧版的layer.js，我们可以推测这里讨论的是一些较早时期的...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值