怎么让网页处于一直加载中?

2018-11-28 09:56:13 +08:00
 cunzhen
目的:进度条显示一直加载中,但是内容正常显示
15056 次点击
所在节点    PHP
105 条回复
cunzhen
2018-11-28 15:03:46 +08:00
@barble 放在页尾也不行啦
cunzhen
2018-11-28 15:04:12 +08:00
@Baymaxbowen 我还跑去知乎搜索半天,后来才看懂你的回复 😂
leave01
2018-11-28 16:06:15 +08:00
@cunzhen 可以加载,最简单的
<link rel="stylesheet" type="text/css" href="style.php">
引用后端文件,然后后端里
<?php
sleep(1000);

引用 CSS 的语句放在页面最后,这样内容能加载出来,但会一直转圈圈
otakustay
2018-11-28 16:30:47 +08:00
放一个永远不会完成的 iframe 就行了,用其它类型的资源容易卡住页面
u3u
2018-11-28 16:34:56 +08:00
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div>loading...</div>
<script>
function pending() {
var script = document.createElement('script');
script.src = 'https://google.com'; // 可换成一个任意无法连接的地址
script.onabort = pending;
script.onerror = pending;
document.body.appendChild(script);
}

pending();
</script>
</body>
</html>
```

测试可行 不过手动点击浏览器的停止加载按钮还是会失效 不明白为什么会有这种需求 😓
1010543618
2018-11-28 16:45:11 +08:00
后台一直积累服务器肯定受不了啊,可以前端做个假的一直加载的进度条
reus
2018-11-28 16:51:29 +08:00
不合理的需求,就一定要挖出背后的原因,然后看看有没有其他方法去实现最初的目的
你用半桶水的方法实现不合理的需求,那后面肯定还要找你擦屁股,得不偿失
请求不返回?那我同时发起多个请求,不就把你服务器撑爆了?
xavierskip
2018-11-28 16:57:53 +08:00
https://www.jianshu.com/p/4aa085b9984b

5.2 基于 Iframe 及 htmlfile 的流( http streaming )方式
“但是这种方式有一个明显的不足之处:IE、Morzilla Firefox 下端的进度栏都会显示加载没有完成,而且 IE 上方的图标会不停的转动,表示加载正在进行。Google 的天才们使用一个称为“ htmlfile ”的 ActiveX 解决了在 IE 中的加载显示问题,并将这种方法应用到了 gmail+gtalk 产品中。”
xavierskip
2018-11-28 16:59:52 +08:00
https://zhuanlan.zhihu.com/p/37365892 全双工通信的 WebSocket

1. 基于 Iframe 及 htmlfile 的流( Iframe Streaming )
iframe 流方式是在页面中插入一个隐藏的 iframe,利用其 src 属性在服务器和客户端之间创建一条长链接,服务器向 iframe 传输数据(通常是 HTML,内有负责插入信息的 JavaScript ),来实时更新页面。iframe 流方式的优点是浏览器兼容好。

“使用 iframe 请求一个长连接有一个很明显的不足之处:IE、Morzilla Firefox 下端的进度栏都会显示加载没有完成,而且 IE 上方的图标会不停的转动,表示加载正在进行。”
cunzhen
2018-11-28 18:29:11 +08:00
@leave01 非常感谢您贴出代码,测试后效果达到了,但是发现页面无法加载出来
cunzhen
2018-11-28 18:30:51 +08:00
@otakustay 试了一下,好像不行,能贴出代码吗?
cunzhen
2018-11-28 18:34:10 +08:00
@u3u 感谢您贴出了代码,测试后发现载入一定时间之后,会造成浏览器超时,浏览器停止了该加载。以及页面的 setTimeout 失效了,给 pending();添加 setTimeout 后,pending();失效。
cunzhen
2018-11-28 18:37:23 +08:00
@xavierskip 非常感谢大佬,还特意去翻看了文档,使用 Iframe 去链接一个没有相应的资源吗?
POPOEVER
2018-11-28 19:13:47 +08:00
@cunzhen 汗,要异步啊兄弟,而且要在 document.ready 之后再发请求啊
xavierskip
2018-11-28 21:12:42 +08:00
@cunzhen #53 我也没有试验过,也是你说过这种奇葩需求后突然想起来好像那里提到过。
apoclast
2018-11-28 21:22:00 +08:00
content-length 设大一点, 服务端连接不要关不就行了
ChoateYao
2018-11-28 21:31:21 +08:00
ob_start ob_get_clean ob_flush flush 这些函数能帮助你实现这个功能,别关注性能。
cunzhen
2018-11-28 23:08:01 +08:00
@POPOEVER 貌似也不行啊 😂
cunzhen
2018-11-28 23:08:44 +08:00
@xavierskip 奇葩需求多的是
cunzhen
2018-11-28 23:12:04 +08:00
@ChoateYao 看得我好迷惑

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/512198

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX