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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 2596 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

脚本

逐行

拨号

模拟

15 条回复 • 2017-10-15 12:44:41 +08:00

hzw758

2017-10-14 09:25:45 +08:00

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

2017-10-14 09:31:05 +08:00 via iPhone

Chrome 可以模拟网络环境

Explorare

2017-10-14 09:39:52 +08:00

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

ragnaroks

2017-10-14 12:07:50 +08:00

<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

2017-10-14 12:08:44 +08:00

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

2017-10-14 13:18:15 +08:00

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

Explorare

2017-10-14 14:59:13 +08:00

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

CYKun

2017-10-14 15:54:28 +08:00 via Android

图片

Explorare

2017-10-14 15:57:38 +08:00

@CYKun #8 传神 www

autoxbc

2017-10-14 16:00:23 +08:00

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

CYKun

2017-10-14 16:02:34 +08:00 via Android

@Explorare 哈哈，误触了

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

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

cbais7890

2017-10-14 17:24:08 +08:00

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

yksoft1

2017-10-14 23:09:02 +08:00

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

Explorare

2017-10-14 23:22:58 +08:00

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

fhefh

2017-10-15 12:44:41 +08:00

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