V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
cunzhen
V2EX  ›  PHP

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

  •  
  •   cunzhen · 2018-11-28 09:56:13 +08:00 · 15299 次点击
    这是一个创建于 2178 天前的主题,其中的信息可能已经有所发展或是发生改变。
    目的:进度条显示一直加载中,但是内容正常显示
    105 条回复    2019-02-19 09:44:32 +08:00
    1  2  
    geying
        1
    geying  
       2018-11-28 10:11:43 +08:00
    访问个静态资源 然后服务器不要响应 这样可行不。。。
    chanchan
        2
    chanchan  
       2018-11-28 10:17:31 +08:00
    document.ready 提交一个表单,后台 while true
    519718366
        3
    519718366  
       2018-11-28 10:23:19 +08:00
    写个 bug ?(逃~
    whileFalse
        4
    whileFalse  
       2018-11-28 10:28:50 +08:00
    只要让 http 连接能够建立但不返回即可。Node.JS 很容易实现,PHP 不清楚。

    能透露这个需求是什么吗?
    iblessyou
        5
    iblessyou  
       2018-11-28 10:30:06 +08:00
    不是很懂想干嘛
    如果是网页内的进度条,随便弄个动画就行,放在那看看就好
    还是手机打开网页时的那种进度条。。。呃
    barble
        6
    barble  
       2018-11-28 10:30:22 +08:00
    @geying 浏览器会超时
    uTOmOuk3L6sb4MSI
        7
    uTOmOuk3L6sb4MSI  
       2018-11-28 10:31:24 +08:00   ❤️ 1
    做个假的加载条
    zhengwenk
        8
    zhengwenk  
       2018-11-28 11:02:40 +08:00
    如果只是要效果,用 html+css 写一个进度条放上去。
    ninestep
        9
    ninestep  
       2018-11-28 11:16:44 +08:00
    写个静态页面上面放一个进度条,不变不就行了
    cunzhen
        10
    cunzhen  
    OP
       2018-11-28 11:18:21 +08:00
    @geying 会一直加载不显示页面,而且会超时,小弟尝试过了
    cunzhen
        11
    cunzhen  
    OP
       2018-11-28 11:19:13 +08:00
    @chanchan 不给响应吗?貌似不行的
    cunzhen
        12
    cunzhen  
    OP
       2018-11-28 11:19:20 +08:00
    @519718366 哈哈哈哈
    cunzhen
        13
    cunzhen  
    OP
       2018-11-28 11:20:18 +08:00
    @whileFalse 客户要求的,怪得很
    lupo
        14
    lupo  
       2018-11-28 11:20:25 +08:00
    目的是防 selenium 类的爬虫?
    cunzhen
        15
    cunzhen  
    OP
       2018-11-28 11:20:40 +08:00
    @iblessyou 要是动画那就简单了 /😂
    cunzhen
        16
    cunzhen  
    OP
       2018-11-28 11:20:55 +08:00
    @barble 对的老哥,浏览器会超时
    cunzhen
        17
    cunzhen  
    OP
       2018-11-28 11:21:12 +08:00
    @ODD10 这样不行的,嘿嘿
    cunzhen
        18
    cunzhen  
    OP
       2018-11-28 11:21:38 +08:00
    @zhengwenk 不行哦老哥~
    barble
        19
    barble  
       2018-11-28 11:28:08 +08:00
    @cunzhen 不显示页面是因为你放的位置不对,阻碍页面渲染了
    guolaopi
        20
    guolaopi  
       2018-11-28 11:32:57 +08:00
    放个 GIF 挡住页面所有元素
    Baymaxbowen
        21
    Baymaxbowen  
       2018-11-28 11:50:30 +08:00 via Android
    这个我之前手机刷知乎的时候遇到过,进度条不停地重置但是内容显示完全
    Baymaxbowen
        22
    Baymaxbowen  
       2018-11-28 11:50:46 +08:00 via Android
    @Baymaxbowen emmm,chrome 里面看的
    whileFalse
        23
    whileFalse  
       2018-11-28 12:15:17 +08:00
    @cunzhen 用 js 载这个资源应该可以
    uTOmOuk3L6sb4MSI
        24
    uTOmOuk3L6sb4MSI  
       2018-11-28 12:22:40 +08:00 via iPhone
    imxieke
        25
    imxieke  
       2018-11-28 12:27:56 +08:00 via iPhone
    @ODD10 我遇到过迅雷下载超过 100% 😕
    des
        26
    des  
       2018-11-28 12:35:43 +08:00 via Android
    如果是 fpm 的话,好像是做不到,会把进程池占满,后面的连接不能处理了。
    浏览器的超时我不是特别清楚,好像可以一次只发一点点数据,保持连接不断开。

    你这什么鬼奇葩需求?
    des
        27
    des  
       2018-11-28 12:38:43 +08:00 via Android
    @des
    尝试一下 workman ?
    用 nginx 专门把这个连接转发过来,然后每隔一段时间发送一点点数据
    chinvo
        28
    chinvo  
       2018-11-28 12:41:24 +08:00 via iPhone
    你这什么奇葩需求,Ajax/websocket 了解一下?
    frank611
        29
    frank611  
       2018-11-28 12:44:18 +08:00 via Android
    在子 iframe 中隔一段时间请求一次,后台不响应,主页面可以正常刷新,但状态会一直显示在加载
    kzfile
        30
    kzfile  
       2018-11-28 13:20:09 +08:00   ❤️ 1
    如果解决不了问题,就解决提问题的人
    POPOEVER
        31
    POPOEVER  
       2018-11-28 13:26:36 +08:00
    每三十秒发一个搜索请求给 google
    cunzhen
        32
    cunzhen  
    OP
       2018-11-28 13:34:42 +08:00
    @kzfile 枪毙名单已经给你安排上了
    cunzhen
        33
    cunzhen  
    OP
       2018-11-28 13:35:36 +08:00
    ”你回复过于频繁了,请稍等 1800 秒之后再试“,我靠,我等了两小时
    cunzhen
        34
    cunzhen  
    OP
       2018-11-28 13:36:35 +08:00
    @POPOEVER 我把谷狗加入 script 中,但是没用啊。。。网页直接加载不出来
    chanchan
        35
    chanchan  
       2018-11-28 13:58:43 +08:00
    @cunzhen 我自己试了下 可以啊
    cunzhen
        36
    cunzhen  
    OP
       2018-11-28 14:10:59 +08:00
    @chanchan 咦?代码贴给我看看
    leave01
        37
    leave01  
       2018-11-28 14:21:18 +08:00
    很简单,引用一个 CSS,然后 CSS 所在的服务器返回 Content-Length 填个大的,返回空白,这样就能一直转圈圈了
    cunzhen
        38
    cunzhen  
    OP
       2018-11-28 14:42:01 +08:00
    @des 奇葩客户提的奇葩需求 🤦‍
    cunzhen
        39
    cunzhen  
    OP
       2018-11-28 14:43:00 +08:00
    @leave01 这样会导致页面加载不出来吧。。。🤭
    cunzhen
        40
    cunzhen  
    OP
       2018-11-28 14:43:47 +08:00
    回复有限制,没有回复到的朋友请见谅,没想到这个帖子点击率这么高😂
    cunzhen
        41
    cunzhen  
    OP
       2018-11-28 15:03:46 +08:00
    @barble 放在页尾也不行啦
    cunzhen
        42
    cunzhen  
    OP
       2018-11-28 15:04:12 +08:00
    @Baymaxbowen 我还跑去知乎搜索半天,后来才看懂你的回复 😂
    leave01
        43
    leave01  
       2018-11-28 16:06:15 +08:00
    @cunzhen 可以加载,最简单的
    <link rel="stylesheet" type="text/css" href="style.php">
    引用后端文件,然后后端里
    <?php
    sleep(1000);

    引用 CSS 的语句放在页面最后,这样内容能加载出来,但会一直转圈圈
    otakustay
        44
    otakustay  
       2018-11-28 16:30:47 +08:00
    放一个永远不会完成的 iframe 就行了,用其它类型的资源容易卡住页面
    u3u
        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>
    ```

    测试可行 不过手动点击浏览器的停止加载按钮还是会失效 不明白为什么会有这种需求 😓
    1010543618
        46
    1010543618  
       2018-11-28 16:45:11 +08:00
    后台一直积累服务器肯定受不了啊,可以前端做个假的一直加载的进度条
    reus
        47
    reus  
       2018-11-28 16:51:29 +08:00   ❤️ 10
    不合理的需求,就一定要挖出背后的原因,然后看看有没有其他方法去实现最初的目的
    你用半桶水的方法实现不合理的需求,那后面肯定还要找你擦屁股,得不偿失
    请求不返回?那我同时发起多个请求,不就把你服务器撑爆了?
    xavierskip
        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 产品中。”
    xavierskip
        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 上方的图标会不停的转动,表示加载正在进行。”
    cunzhen
        50
    cunzhen  
    OP
       2018-11-28 18:29:11 +08:00
    @leave01 非常感谢您贴出代码,测试后效果达到了,但是发现页面无法加载出来
    cunzhen
        51
    cunzhen  
    OP
       2018-11-28 18:30:51 +08:00
    @otakustay 试了一下,好像不行,能贴出代码吗?
    cunzhen
        52
    cunzhen  
    OP
       2018-11-28 18:34:10 +08:00
    @u3u 感谢您贴出了代码,测试后发现载入一定时间之后,会造成浏览器超时,浏览器停止了该加载。以及页面的 setTimeout 失效了,给 pending();添加 setTimeout 后,pending();失效。
    cunzhen
        53
    cunzhen  
    OP
       2018-11-28 18:37:23 +08:00
    @xavierskip 非常感谢大佬,还特意去翻看了文档,使用 Iframe 去链接一个没有相应的资源吗?
    POPOEVER
        54
    POPOEVER  
       2018-11-28 19:13:47 +08:00
    @cunzhen 汗,要异步啊兄弟,而且要在 document.ready 之后再发请求啊
    xavierskip
        55
    xavierskip  
       2018-11-28 21:12:42 +08:00
    @cunzhen #53 我也没有试验过,也是你说过这种奇葩需求后突然想起来好像那里提到过。
    ChoateYao
        57
    ChoateYao  
       2018-11-28 21:31:21 +08:00
    ob_start ob_get_clean ob_flush flush 这些函数能帮助你实现这个功能,别关注性能。
    cunzhen
        58
    cunzhen  
    OP
       2018-11-28 23:08:01 +08:00
    @POPOEVER 貌似也不行啊 😂
    cunzhen
        59
    cunzhen  
    OP
       2018-11-28 23:08:44 +08:00
    @xavierskip 奇葩需求多的是
    cunzhen
        60
    cunzhen  
    OP
       2018-11-28 23:12:04 +08:00
    @ChoateYao 看得我好迷惑
    jugelizi
        61
    jugelizi  
       2018-11-28 23:15:51 +08:00
    以前也遇到一个客户 需求是把网页打开弄慢点 Orz
    t6attack
        62
    t6attack  
       2018-11-28 23:17:35 +08:00
    @cunzhen 57 楼所说的内容,你不研究明白的话,“加载中”的页面会一直空白的。什么都不会输出。
    enjoyCoding
        63
    enjoyCoding  
       2018-11-28 23:36:59 +08:00 via iPhone
    现在用 Promise 发请求好像是能取消的?每隔三十秒访问他们说的不给返回的接口 三十秒后取消
    necomancer
        64
    necomancer  
       2018-11-29 00:01:16 +08:00
    我发现很多网站因为有 google 的 js,字体等一系列东西会有一个非常非常长的加载时间……
    halohero
        65
    halohero  
       2018-11-29 00:05:54 +08:00
    DengMr
        66
    DengMr  
       2018-11-29 00:20:59 +08:00
    nprogress
    shingle
        67
    shingle  
       2018-11-29 00:49:19 +08:00 via Android
    后端实现 http response flush
    beny2mor
        68
    beny2mor  
       2018-11-29 01:02:13 +08:00   ❤️ 1
    返回流?
    比如这个 time.gif https://hookrace.net/blog/time.gif/
    beny2mor
        69
    beny2mor  
       2018-11-29 01:03:48 +08:00
    @beny2mor 在你的页面上放这张 gif
    crab
        70
    crab  
       2018-11-29 01:07:33 +08:00
    加载个 url,2 个 301 重定向互相指。
    cigarzh
        71
    cigarzh  
       2018-11-29 02:09:59 +08:00 via iPad
    @crab #70 重定向次数过多浏览器会报错的
    qiukong
        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);
    ?>
    ccnccy
        73
    ccnccy  
       2018-11-29 08:07:52 +08:00 via iPhone
    在服务器放个 100g 的文件,然后每个页面自动加载它。
    maxxfire
        74
    maxxfire  
       2018-11-29 08:42:01 +08:00
    别啥需求都满足它,搞技术的就是纯良。。
    8023
        75
    8023  
       2018-11-29 08:54:56 +08:00 via Android
    搞一个带宽只有 10k 的服务器,里面放一个 100g 的文件,网页最后面载入它。
    northernlights
        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
    cccy0
        77
    cccy0  
       2018-11-29 09:27:56 +08:00
    感觉有的人已经被安排了
    lanjz
        78
    lanjz  
       2018-11-29 09:41:53 +08:00
    服务端 sleep 30s,js 每 29s 插入到 html 去加载
    irgil
        79
    irgil  
       2018-11-29 09:43:02 +08:00
    想后端发起 http 请求,后端建立连接但是 hold 住不返回。超时后前端自动关闭并立即建立新的请求链接即可
    gam2046
        80
    gam2046  
       2018-11-29 10:04:21 +08:00
    html 最后面加上

    <img src="http://httpbin.org/delay/10" />
    happuiness
        81
    happuiness  
       2018-11-29 10:05:26 +08:00   ❤️ 3
    我猜需求是放在微信浏览器内,页面不加载完无法举报投诉吧 > _ >
    mywowo
        82
    mywowo  
       2018-11-29 14:04:24 +08:00
    chuncked
    dapp98230
        83
    dapp98230  
       2018-11-29 14:06:49 +08:00
    做个 flash 小动画。。一直 loading 圆圈一直转。。。或者跟微信内打开某些链接一样的。。其实东西打不开的,但是他的那个绿条在慢慢地爬,,给你无限的希望
    cunzhen
        84
    cunzhen  
    OP
       2018-11-29 21:34:46 +08:00
    @jugelizi 对的,这种客户一般不是一手客户。。。
    cunzhen
        85
    cunzhen  
    OP
       2018-11-29 21:35:46 +08:00
    @enjoyCoding 试试
    cunzhen
        86
    cunzhen  
    OP
       2018-11-29 21:38:23 +08:00
    @maxxfire 拿人钱财,木办法哟
    cunzhen
        87
    cunzhen  
    OP
       2018-11-29 21:42:44 +08:00
    @qiukong 这样会消耗服务器性能。。。
    cunzhen
        88
    cunzhen  
    OP
       2018-11-29 21:45:37 +08:00
    @northernlights 不给响应咩~
    cunzhen
        89
    cunzhen  
    OP
       2018-11-29 21:47:04 +08:00
    @happuiness 还有这种 BUG ?不过这是 PC 端的网页呢
    cunzhen
        90
    cunzhen  
    OP
       2018-11-29 21:49:24 +08:00
    @northernlights 10 年有点狠。。。。哈哈哈
    cunzhen
        91
    cunzhen  
    OP
       2018-11-29 21:51:28 +08:00
    @dapp98230 安慰剂~
    jimrok
        92
    jimrok  
       2018-11-29 22:07:07 +08:00
    使用 stream 方式,http 的协议上没有 content-length,所以一直不会被关闭,server 端隔一段时间,flush 一下数据,只要不 close,就可以样网页一直在加载。最早的聊天室都是这样做的。
    cunzhen
        93
    cunzhen  
    OP
       2018-11-29 22:30:02 +08:00
    @jimrok 能贴一下代码吗?
    northernlights
        94
    northernlights  
       2018-11-30 08:37:18 +08:00
    @cunzhen sleep 了 10 years 就是不响应,但是 js 应该有个 timeout 吧,timeout 了就进入 fail 函数中无穷递归!
    jimrok
        95
    jimrok  
       2018-11-30 11:13:55 +08:00
    @cunzhen PHP 我不会,主要是利用 Transfer-Encoding: chunked 的编码,可以看看 http://imweb.io/topic/579f00de93d9938132cc8da4
    cunzhen
        96
    cunzhen  
    OP
       2018-12-01 16:39:42 +08:00
    @jimrok 谢谢您
    phpdev
        97
    phpdev  
       2018-12-02 11:43:43 +08:00
    做个 gif,显示”加载中“
    cunzhen
        98
    cunzhen  
    OP
       2018-12-03 00:11:34 +08:00
    @phpdev 骗子~
    cunzhen
        99
    cunzhen  
    OP
       2018-12-03 00:12:51 +08:00
    谢谢各位大佬的热心回答,最后使用页内加载条解决了,当加载进度到达 90%时,放缓加载条的速度,让它永远无法 100% 😂
    phpdev
        100
    phpdev  
       2019-01-03 18:55:18 +08:00
    @cunzhen Lol
    1  2  
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1027 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 42ms · UTC 21:01 · PVG 05:01 · LAX 13:01 · JFK 16:01
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.