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

2017-10-14 09:13:06 +08:00
 Explorare

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

3148 次点击
所在节点    JavaScript
15 条回复
hzw758
2017-10-14 09:25:45 +08:00
Chrome 开发人员工具里可以模拟呀
oh
2017-10-14 09:31:05 +08:00
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 作为子元素占满父元素,不然一直就是一条直线
pq
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
图片
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
@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 图片中的小姐姐 叫啥名字

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/397512

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX