cunzhen
V2EX  ›  PHP

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

  •  
  •   cunzhen · Nov 28, 2018 · 17859 views
    This topic created in 2900 days ago, the information mentioned may be changed or developed.
    目的:进度条显示一直加载中,但是内容正常显示
    105 replies  •  2019-02-19 09:44:32 +08:00
    1  2  
    ❮ ❯
    geying
    geying
    Nov 28, 2018
    1
    访问个静态资源 然后服务器不要响应 这样可行不。。。
    chanchan
    chanchan
    Nov 28, 2018
    2
    document.ready 提交一个表单,后台 while true
    519718366
    519718366
    Nov 28, 2018
    3
    写个 bug ?(逃~
    whileFalse
    whileFalse
    Nov 28, 2018
    4
    只要让 http 连接能够建立但不返回即可。Node.JS 很容易实现,PHP 不清楚。

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

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

    引用 CSS 的语句放在页面最后,这样内容能加载出来,但会一直转圈圈
    otakustay
    otakustay
    Nov 28, 2018
    44
    放一个永远不会完成的 iframe 就行了,用其它类型的资源容易卡住页面
    u3u
    u3u
    Nov 28, 2018
    45
    ```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
    1010543618
    Nov 28, 2018
    46
    后台一直积累服务器肯定受不了啊,可以前端做个假的一直加载的进度条
    reus
    reus
    Nov 28, 2018❤️10
    47
    不合理的需求,就一定要挖出背后的原因,然后看看有没有其他方法去实现最初的目的
    你用半桶水的方法实现不合理的需求,那后面肯定还要找你擦屁股,得不偿失
    请求不返回?那我同时发起多个请求,不就把你服务器撑爆了?
    C0VN
    C0VN
    Nov 28, 2018
    48
    https://www.jianshu.com/p/4aa085b9984b

    5.2 基于 Iframe 及 htmlfile 的流( http streaming )方式
    “但是这种方式有一个明显的不足之处:IE、Morzilla Firefox 下端的进度栏都会显示加载没有完成,而且 IE 上方的图标会不停的转动,表示加载正在进行。Google 的天才们使用一个称为“ htmlfile ”的 ActiveX 解决了在 IE 中的加载显示问题,并将这种方法应用到了 gmail+gtalk 产品中。”
    C0VN
    C0VN
    Nov 28, 2018
    49
    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
    cunzhen
    OP
    Nov 28, 2018
    50
    @leave01 非常感谢您贴出代码,测试后效果达到了,但是发现页面无法加载出来
    cunzhen
    cunzhen
    OP
    Nov 28, 2018
    51
    @otakustay 试了一下,好像不行,能贴出代码吗?
    cunzhen
    cunzhen
    OP
    Nov 28, 2018
    52
    @u3u 感谢您贴出了代码,测试后发现载入一定时间之后,会造成浏览器超时,浏览器停止了该加载。以及页面的 setTimeout 失效了,给 pending();添加 setTimeout 后,pending();失效。
    cunzhen
    cunzhen
    OP
    Nov 28, 2018
    53
    @xavierskip 非常感谢大佬,还特意去翻看了文档,使用 Iframe 去链接一个没有相应的资源吗?
    POPOEVER
    POPOEVER
    Nov 28, 2018
    54
    @cunzhen 汗,要异步啊兄弟,而且要在 document.ready 之后再发请求啊
    C0VN
    C0VN
    Nov 28, 2018
    55
    @cunzhen #53 我也没有试验过,也是你说过这种奇葩需求后突然想起来好像那里提到过。
    ChoateYao
    ChoateYao
    Nov 28, 2018
    57
    ob_start ob_get_clean ob_flush flush 这些函数能帮助你实现这个功能,别关注性能。
    cunzhen
    cunzhen
    OP
    Nov 28, 2018
    58
    @POPOEVER 貌似也不行啊 😂
    cunzhen
    cunzhen
    OP
    Nov 28, 2018
    59
    @xavierskip 奇葩需求多的是
    cunzhen
    cunzhen
    OP
    Nov 28, 2018
    60
    @ChoateYao 看得我好迷惑
    jugelizi
    jugelizi
    Nov 28, 2018
    61
    以前也遇到一个客户 需求是把网页打开弄慢点 Orz
    t6attack
    t6attack
    Nov 28, 2018
    62
    @cunzhen 57 楼所说的内容,你不研究明白的话,“加载中”的页面会一直空白的。什么都不会输出。
    enjoyCoding
    enjoyCoding
    Nov 28, 2018 via iPhone
    63
    现在用 Promise 发请求好像是能取消的?每隔三十秒访问他们说的不给返回的接口 三十秒后取消
    necomancer
    necomancer
    Nov 29, 2018
    64
    我发现很多网站因为有 google 的 js,字体等一系列东西会有一个非常非常长的加载时间……
    DengMr
    DengMr
    Nov 29, 2018
    66
    nprogress
    shingle
    shingle
    Nov 29, 2018 via Android
    67
    后端实现 http response flush
    beny2mor
    beny2mor
    Nov 29, 2018❤️1
    68
    返回流?
    比如这个 time.gif https://hookrace.net/blog/time.gif/
    beny2mor
    beny2mor
    Nov 29, 2018
    69
    @beny2mor 在你的页面上放这张 gif
    crab
    crab
    Nov 29, 2018
    70
    加载个 url,2 个 301 重定向互相指。
    cigarzh
    cigarzh
    Nov 29, 2018 via iPad
    71
    @crab #70 重定向次数过多浏览器会报错的
    qiukong
    qiukong
    Nov 29, 2018
    72
    <?php
    $wait=600; //服务器执行程序能撑多少秒就设置多少秒,大于访客能承受的时间就够了。
    set_time_limit($wait);
    echo '这是开头<br />';
    echo '这是结尾<br />';
    ob_flush();flush();
    sleep($wait);
    ?>
    ccnccy
    ccnccy
    Nov 29, 2018 via iPhone
    73
    在服务器放个 100g 的文件,然后每个页面自动加载它。
    maxxfire
    maxxfire
    Nov 29, 2018
    74
    别啥需求都满足它,搞技术的就是纯良。。
    8023
    8023
    Nov 29, 2018 via Android
    75
    搞一个带宽只有 10k 的服务器,里面放一个 100g 的文件,网页最后面载入它。
    northernlights
    northernlights
    Nov 29, 2018
    76
    frontend:
    request(){
    ajax({
    async:true,
    fail:()=>request()
    })
    }
    server:
    sleep(1000*60*60*24*365*10)//10years
    cccy0
    cccy0
    Nov 29, 2018
    77
    感觉有的人已经被安排了
    lanjz
    lanjz
    Nov 29, 2018
    78
    服务端 sleep 30s,js 每 29s 插入到 html 去加载
    irgil
    irgil
    Nov 29, 2018
    79
    想后端发起 http 请求,后端建立连接但是 hold 住不返回。超时后前端自动关闭并立即建立新的请求链接即可
    ntdll
    ntdll
    Nov 29, 2018
    80
    html 最后面加上

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