cunzhen
V2EX  ›  PHP

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

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

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

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

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

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

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