V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
Explorare
V2EX  ›  JavaScript

求一个能模拟 '90 拨号宽带的图片逐行扫描效果的 js 脚本

  •  
  •   Explorare · 2017-10-14 09:13:06 +08:00 · 3032 次点击
    这是一个创建于 2357 天前的主题,其中的信息可能已经有所发展或是发生改变。

    原来曾经见到过一个 js 脚本,能模拟 56K 拨号上网时因为带宽不足而导致图片逐行加载的脚本,我已经忘记是多久之前看到过的了,也再也找不到了,求助。

    15 条回复    2017-10-15 12:44:41 +08:00
    hzw758
        1
    hzw758  
       2017-10-14 09:25:45 +08:00
    Chrome 开发人员工具里可以模拟呀
    oh
        2
    oh  
       2017-10-14 09:31:05 +08:00 via iPhone
    Chrome 可以模拟网络环境
    Explorare
        3
    Explorare  
    OP
       2017-10-14 09:39:52 +08:00
    @hzw758 #1
    @oh #2
    我的意思是我想在网站上部署一个脚本模拟这个效果,让访问者可以看到的。
    ragnaroks
        4
    ragnaroks  
       2017-10-14 12:07:50 +08:00   ❤️ 1
    <img id="image" src="<src>" style="width:100%;height:0;overflow:hidden;">
    <script>
    let height=1;
    let i=setInterval(()=>{
    document.getelementbyid('image').style.height=height+'%';
    height=(height<=100)?++:height;
    },100);
    </script>
    ragnaroks
        5
    ragnaroks  
       2017-10-14 12:08:44 +08:00
    img 作为子元素占满父元素,不然一直就是一条直线
    pq
        6
    pq  
       2017-10-14 13:18:15 +08:00
    一张图片横切成多张图片,然后 js 脚本一张张延时加载?
    Explorare
        7
    Explorare  
    OP
       2017-10-14 14:59:13 +08:00
    @pq #6 大概不是吧,那得切多少张啊。
    CYKun
        8
    CYKun  
       2017-10-14 15:54:28 +08:00 via Android
    图片
    Explorare
        9
    Explorare  
    OP
       2017-10-14 15:57:38 +08:00
    @CYKun #8 传神 www
    autoxbc
        10
    autoxbc  
       2017-10-14 16:00:23 +08:00   ❤️ 1
    CSS3 的 transition 属性可以生成动画,只需要控制初始样式,结束样式,可选的速度曲线
    CYKun
        11
    CYKun  
       2017-10-14 16:02:34 +08:00 via Android   ❤️ 1
    @Explorare 哈哈,误触了

    我的想法是在图片上面放一个空白元素,初始的时候空白元素完全盖住图片,然后用 css 控制空白元素的高度变化,模拟出逐行加载的效果。

    我不懂 css,随口瞎说一下,不可行不要打我
    cbais7890
        12
    cbais7890  
       2017-10-14 17:24:08 +08:00   ❤️ 2
    如果只是简单的线性遮盖 /隐藏, 用不到 JS
    https://codepen.io/Caldis/pen/MEqLoW
    一个伪类套一段动画就行, 延时和持续时间都可以自定义
    yksoft1
        13
    yksoft1  
       2017-10-14 23:09:02 +08:00
    我现在用纸飞机,由于其线路问题,用某些 ISP 上的时候 还能经常碰上图片逐行加载。
    Explorare
        14
    Explorare  
    OP
       2017-10-14 23:22:58 +08:00
    @yksoft1 #13 我爱国上网访问亿恒泰的时候基本每张图片都是逐行加载,大概持续 5s,每张图大约 3MB 左右。
    fhefh
        15
    fhefh  
       2017-10-15 12:44:41 +08:00
    @cbais7890 #12 图片中的小姐姐 叫啥名字
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   995 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 19:52 · PVG 03:52 · LAX 12:52 · JFK 15:52
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.