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

[Explorare]

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

[hzw758]

Chrome 开发人员工具里可以模拟呀

[oh]

Chrome 可以模拟网络环境

[Explorare]

@hzw758 #1
@oh #2
我的意思是我想在网站上部署一个脚本模拟这个效果，让访问者可以看到的。

[ragnaroks]

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

img 作为子元素占满父元素,不然一直就是一条直线

[pq]

一张图片横切成多张图片，然后 js 脚本一张张延时加载？

[Explorare]

@pq #6 大概不是吧，那得切多少张啊。

[CYKun]

图片

[Explorare]

@CYKun #8 传神 www

[autoxbc]

CSS3 的 transition 属性可以生成动画，只需要控制初始样式，结束样式，可选的速度曲线

[CYKun]

@Explorare 哈哈，误触了

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

我不懂 css，随口瞎说一下，不可行不要打我

[cbais7890]

如果只是简单的线性遮盖 /隐藏, 用不到 JS
https://codepen.io/Caldis/pen/MEqLoW
一个伪类套一段动画就行, 延时和持续时间都可以自定义

[yksoft1]

我现在用纸飞机，由于其线路问题，用某些 ISP 上的时候 还能经常碰上图片逐行加载。

[Explorare]

@yksoft1 #13 我爱国上网访问亿恒泰的时候基本每张图片都是逐行加载，大概持续 5s，每张图大约 3MB 左右。

[fhefh]

@cbais7890 #12 图片中的小姐姐 叫啥名字