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

进度

显示

网页

载

105 条回复 • 2019-02-19 09:44:32 +08:00

1 2

❮

❯

1

geying

2018-11-28 10:11:43 +08:00

访问个静态资源然后服务器不要响应这样可行不。。。

2

chanchan

2018-11-28 10:17:31 +08:00

document.ready 提交一个表单,后台 while true

3

519718366

2018-11-28 10:23:19 +08:00

写个 bug ？（逃～

4

whileFalse

2018-11-28 10:28:50 +08:00

只要让 http 连接能够建立但不返回即可。Node.JS 很容易实现，PHP 不清楚。

能透露这个需求是什么吗？

5

iblessyou

2018-11-28 10:30:06 +08:00

不是很懂想干嘛
如果是网页内的进度条，随便弄个动画就行，放在那看看就好
还是手机打开网页时的那种进度条。。。呃

6

barble

2018-11-28 10:30:22 +08:00

@geying 浏览器会超时

7

uTOmOuk3L6sb4MSI

2018-11-28 10:31:24 +08:00

1

做个假的加载条

8

zhengwenk

2018-11-28 11:02:40 +08:00

如果只是要效果，用 html+css 写一个进度条放上去。

9

ninestep

2018-11-28 11:16:44 +08:00

写个静态页面上面放一个进度条，不变不就行了

10

cunzhen

OP

2018-11-28 11:18:21 +08:00

@geying 会一直加载不显示页面，而且会超时，小弟尝试过了

11

cunzhen

OP

2018-11-28 11:19:13 +08:00

@chanchan 不给响应吗？貌似不行的

12

cunzhen

OP

2018-11-28 11:19:20 +08:00

@519718366 哈哈哈哈

13

cunzhen

OP

2018-11-28 11:20:18 +08:00

@whileFalse 客户要求的，怪得很

14

lupo

2018-11-28 11:20:25 +08:00

目的是防 selenium 类的爬虫？

15

cunzhen

OP

2018-11-28 11:20:40 +08:00

@iblessyou 要是动画那就简单了 /😂

16

cunzhen

OP

2018-11-28 11:20:55 +08:00

@barble 对的老哥，浏览器会超时

17

cunzhen

OP

2018-11-28 11:21:12 +08:00

@ODD10 这样不行的，嘿嘿

18

cunzhen

OP

2018-11-28 11:21:38 +08:00

@zhengwenk 不行哦老哥~

19

barble

2018-11-28 11:28:08 +08:00

@cunzhen 不显示页面是因为你放的位置不对，阻碍页面渲染了

20

guolaopi

2018-11-28 11:32:57 +08:00

放个 GIF 挡住页面所有元素

21

Baymaxbowen

2018-11-28 11:50:30 +08:00 via Android

这个我之前手机刷知乎的时候遇到过，进度条不停地重置但是内容显示完全

22

Baymaxbowen

2018-11-28 11:50:46 +08:00 via Android

@Baymaxbowen emmm，chrome 里面看的

23

whileFalse

2018-11-28 12:15:17 +08:00

@cunzhen 用 js 载这个资源应该可以

24

uTOmOuk3L6sb4MSI

2018-11-28 12:22:40 +08:00 via iPhone

https://i.loli.net/2018/11/28/5bfe180f0df0d.png

25

imxieke

2018-11-28 12:27:56 +08:00 via iPhone

@ODD10 我遇到过迅雷下载超过 100% 😕

26

des

2018-11-28 12:35:43 +08:00 via Android

如果是 fpm 的话，好像是做不到，会把进程池占满，后面的连接不能处理了。
浏览器的超时我不是特别清楚，好像可以一次只发一点点数据，保持连接不断开。

你这什么鬼奇葩需求？

27

des

2018-11-28 12:38:43 +08:00 via Android

@des
尝试一下 workman ？
用 nginx 专门把这个连接转发过来，然后每隔一段时间发送一点点数据

28

chinvo

2018-11-28 12:41:24 +08:00 via iPhone

你这什么奇葩需求，Ajax/websocket 了解一下？

29

frank611

2018-11-28 12:44:18 +08:00 via Android

在子 iframe 中隔一段时间请求一次，后台不响应，主页面可以正常刷新，但状态会一直显示在加载

30

kzfile

2018-11-28 13:20:09 +08:00

1

如果解决不了问题,就解决提问题的人

31

POPOEVER

2018-11-28 13:26:36 +08:00

每三十秒发一个搜索请求给 google

32

cunzhen

OP

2018-11-28 13:34:42 +08:00

@kzfile 枪毙名单已经给你安排上了

33

cunzhen

OP

2018-11-28 13:35:36 +08:00

”你回复过于频繁了，请稍等 1800 秒之后再试“，我靠，我等了两小时

34

cunzhen

OP

2018-11-28 13:36:35 +08:00

@POPOEVER 我把谷狗加入 script 中，但是没用啊。。。网页直接加载不出来

35

chanchan

2018-11-28 13:58:43 +08:00

@cunzhen 我自己试了下可以啊

36

cunzhen

OP

2018-11-28 14:10:59 +08:00

@chanchan 咦？代码贴给我看看

37

leave01

2018-11-28 14:21:18 +08:00

很简单，引用一个 CSS，然后 CSS 所在的服务器返回 Content-Length 填个大的，返回空白，这样就能一直转圈圈了

38

cunzhen

OP

2018-11-28 14:42:01 +08:00

@des 奇葩客户提的奇葩需求 🤦‍

39

cunzhen

OP

2018-11-28 14:43:00 +08:00

@leave01 这样会导致页面加载不出来吧。。。🤭

40

cunzhen

OP

2018-11-28 14:43:47 +08:00

回复有限制，没有回复到的朋友请见谅，没想到这个帖子点击率这么高😂

41

cunzhen

OP

2018-11-28 15:03:46 +08:00

@barble 放在页尾也不行啦

42

cunzhen

OP

2018-11-28 15:04:12 +08:00

@Baymaxbowen 我还跑去知乎搜索半天，后来才看懂你的回复 😂

43

leave01

2018-11-28 16:06:15 +08:00

@cunzhen 可以加载，最简单的
<link rel="stylesheet" type="text/css" href="style.php">
引用后端文件，然后后端里
<?php
sleep(1000);

引用 CSS 的语句放在页面最后，这样内容能加载出来，但会一直转圈圈

44

otakustay

2018-11-28 16:30:47 +08:00

放一个永远不会完成的 iframe 就行了，用其它类型的资源容易卡住页面

45

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>
```

测试可行不过手动点击浏览器的停止加载按钮还是会失效不明白为什么会有这种需求 😓

46

1010543618

2018-11-28 16:45:11 +08:00

后台一直积累服务器肯定受不了啊，可以前端做个假的一直加载的进度条

47

reus

2018-11-28 16:51:29 +08:00

10

不合理的需求，就一定要挖出背后的原因，然后看看有没有其他方法去实现最初的目的
你用半桶水的方法实现不合理的需求，那后面肯定还要找你擦屁股，得不偿失
请求不返回？那我同时发起多个请求，不就把你服务器撑爆了？

48

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 产品中。”

49

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 上方的图标会不停的转动，表示加载正在进行。”

50

cunzhen

OP

2018-11-28 18:29:11 +08:00

@leave01 非常感谢您贴出代码，测试后效果达到了，但是发现页面无法加载出来

51

cunzhen

OP

2018-11-28 18:30:51 +08:00

@otakustay 试了一下，好像不行，能贴出代码吗？

52

cunzhen

OP

2018-11-28 18:34:10 +08:00

@u3u 感谢您贴出了代码，测试后发现载入一定时间之后，会造成浏览器超时，浏览器停止了该加载。以及页面的 setTimeout 失效了，给 pending();添加 setTimeout 后，pending();失效。

53

cunzhen

OP

2018-11-28 18:37:23 +08:00

@xavierskip 非常感谢大佬，还特意去翻看了文档，使用 Iframe 去链接一个没有相应的资源吗？

54

POPOEVER

2018-11-28 19:13:47 +08:00

@cunzhen 汗，要异步啊兄弟，而且要在 document.ready 之后再发请求啊

55

xavierskip

2018-11-28 21:12:42 +08:00

@cunzhen #53 我也没有试验过，也是你说过这种奇葩需求后突然想起来好像那里提到过。

57

ChoateYao

2018-11-28 21:31:21 +08:00

ob_start ob_get_clean ob_flush flush 这些函数能帮助你实现这个功能，别关注性能。

58

cunzhen

OP

2018-11-28 23:08:01 +08:00

@POPOEVER 貌似也不行啊 😂

59

cunzhen

OP

2018-11-28 23:08:44 +08:00

@xavierskip 奇葩需求多的是

60

cunzhen

OP

2018-11-28 23:12:04 +08:00

@ChoateYao 看得我好迷惑

61

jugelizi

2018-11-28 23:15:51 +08:00

以前也遇到一个客户需求是把网页打开弄慢点 Orz

62

t6attack

2018-11-28 23:17:35 +08:00

@cunzhen 57 楼所说的内容，你不研究明白的话，“加载中”的页面会一直空白的。什么都不会输出。

63

enjoyCoding

2018-11-28 23:36:59 +08:00 via iPhone

现在用 Promise 发请求好像是能取消的？每隔三十秒访问他们说的不给返回的接口三十秒后取消

64

necomancer

2018-11-29 00:01:16 +08:00

我发现很多网站因为有 google 的 js，字体等一系列东西会有一个非常非常长的加载时间……

65

halohero

2018-11-29 00:05:54 +08:00

openresty 轻松完成

http://wiki.jikexueyuan.com/project/openresty/openresty/response.html

66

DengMr

2018-11-29 00:20:59 +08:00

nprogress

67

shingle

2018-11-29 00:49:19 +08:00 via Android

后端实现 http response flush

68

beny2mor

2018-11-29 01:02:13 +08:00

1

返回流？
比如这个 time.gif https://hookrace.net/blog/time.gif/

69

beny2mor

2018-11-29 01:03:48 +08:00

@beny2mor 在你的页面上放这张 gif

70

crab

2018-11-29 01:07:33 +08:00

加载个 url，2 个 301 重定向互相指。

71

cigarzh

2018-11-29 02:09:59 +08:00 via iPad

@crab #70 重定向次数过多浏览器会报错的

72

qiukong

2018-11-29 04:17:48 +08:00

<?php
$wait=600; //服务器执行程序能撑多少秒就设置多少秒，大于访客能承受的时间就够了。
set_time_limit($wait);
echo '这是开头<br />';
echo '这是结尾<br />';
ob_flush();flush();
sleep($wait);
?>

73

ccnccy

2018-11-29 08:07:52 +08:00 via iPhone

在服务器放个 100g 的文件，然后每个页面自动加载它。

74

maxxfire

2018-11-29 08:42:01 +08:00

别啥需求都满足它，搞技术的就是纯良。。

75

8023

2018-11-29 08:54:56 +08:00 via Android

搞一个带宽只有 10k 的服务器，里面放一个 100g 的文件，网页最后面载入它。

76

northernlights

2018-11-29 09:23:45 +08:00

frontend:
request(){
ajax({
async:true,
fail:()=>request()
})
}
server:
sleep(1000*60*60*24*365*10)//10years

77

cccy0

2018-11-29 09:27:56 +08:00

感觉有的人已经被安排了

78

lanjz

2018-11-29 09:41:53 +08:00

服务端 sleep 30s，js 每 29s 插入到 html 去加载

79

irgil

2018-11-29 09:43:02 +08:00

想后端发起 http 请求，后端建立连接但是 hold 住不返回。超时后前端自动关闭并立即建立新的请求链接即可

80

gam2046

2018-11-29 10:04:21 +08:00

html 最后面加上

<img src="http://httpbin.org/delay/10" />

81

happuiness

2018-11-29 10:05:26 +08:00

3

我猜需求是放在微信浏览器内，页面不加载完无法举报投诉吧 > _ >

82

mywowo

2018-11-29 14:04:24 +08:00

chuncked

83

dapp98230

2018-11-29 14:06:49 +08:00

做个 flash 小动画。。一直 loading 圆圈一直转。。。或者跟微信内打开某些链接一样的。。其实东西打不开的，但是他的那个绿条在慢慢地爬，，给你无限的希望

84

cunzhen

OP

2018-11-29 21:34:46 +08:00

@jugelizi 对的，这种客户一般不是一手客户。。。

85

cunzhen

OP

2018-11-29 21:35:46 +08:00

@enjoyCoding 试试

86

cunzhen

OP

2018-11-29 21:38:23 +08:00

@maxxfire 拿人钱财，木办法哟

87

cunzhen

OP

2018-11-29 21:42:44 +08:00

@qiukong 这样会消耗服务器性能。。。

88

cunzhen

OP

2018-11-29 21:45:37 +08:00

@northernlights 不给响应咩~

89

cunzhen

OP

2018-11-29 21:47:04 +08:00

@happuiness 还有这种 BUG ？不过这是 PC 端的网页呢

90

cunzhen

OP

2018-11-29 21:49:24 +08:00

@northernlights 10 年有点狠。。。。哈哈哈

91

cunzhen

OP

2018-11-29 21:51:28 +08:00

@dapp98230 安慰剂~

92

jimrok

2018-11-29 22:07:07 +08:00

使用 stream 方式，http 的协议上没有 content-length，所以一直不会被关闭，server 端隔一段时间，flush 一下数据，只要不 close，就可以样网页一直在加载。最早的聊天室都是这样做的。

93

cunzhen

OP

2018-11-29 22:30:02 +08:00

@jimrok 能贴一下代码吗？

94

northernlights

2018-11-30 08:37:18 +08:00

@cunzhen sleep 了 10 years 就是不响应，但是 js 应该有个 timeout 吧，timeout 了就进入 fail 函数中无穷递归！

95

jimrok

2018-11-30 11:13:55 +08:00

@cunzhen PHP 我不会，主要是利用 Transfer-Encoding: chunked 的编码，可以看看 http://imweb.io/topic/579f00de93d9938132cc8da4

96

cunzhen

OP

2018-12-01 16:39:42 +08:00

@jimrok 谢谢您

97

phpdev

2018-12-02 11:43:43 +08:00

做个 gif,显示”加载中“

98

cunzhen

OP

2018-12-03 00:11:34 +08:00

@phpdev 骗子~

99

cunzhen

OP

2018-12-03 00:12:51 +08:00

谢谢各位大佬的热心回答，最后使用页内加载条解决了，当加载进度到达 90%时，放缓加载条的速度，让它永远无法 100% 😂

100

phpdev

2019-01-03 18:55:18 +08:00

@cunzhen Lol

1 2

❮

❯