html循环加载多个图片,两行代码实现图片碎片化加载
今天来实现一个图片碎片化加载效果,效果如下:
我们分为 3 个步骤来实现:
定义 html 结构
拆分图片
编写动画函数
定义 html 结构
这里只需要一个 canvas 元素就可以了。
id="myCanvas"
width="900"
height="600"
style="background-color: black;"
>
拆分图片
这个例子中,我们将图片按照 10 行 10 列的网格,拆分成 100 个小碎片,这样就可以对每一个小碎片独立渲染了。
let image = new Image();
image.src = "https://cdn.yinhengli.com/canvas-example.jpeg";
let boxWidth, boxHeight;
// 拆分成 10 行,10 列
let rows = 10,
columns = 20,
counter = 0;
image.onload = function () {
// 计算每一行,每一列的宽高
boxWidth = image.width / columns;
boxHeight = image.height / rows;
// 循环渲染
requestAnimationFrame(animate);
};
requestAnimationFrame:告诉浏览器,你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。
编写动画函数
接下来我们编写动画函数,让浏览器在每一次重绘前,随机渲染某个小碎片。
let canvas = document.getElementById("myCanvas");
let context = canvas.getContext("2d");
function animate() {
// 随机渲染某个模块
let x = Math.floor(Math.random() * columns);
let y = Math.floor(Math.random() * rows);
// 核心
context.drawImage(
image,
x * boxWidth, // canvas 中横坐标起始位置
y * boxHeight, // canvas 中纵坐标起始位置
boxWidth, // 画图的宽度(小碎片图像的宽)
boxHeight, // 画图的高度(小碎片图像的高)
x * boxWidth, // 从大图的 x 坐标位置开始画图
y * boxHeight, // 从大图的 y 坐标位置开始画图
boxWidth, // 从大图的 x 位置开始,画多宽(小碎片图像的宽)
boxHeight // 从大图的 y 位置开始,画多高(小碎片图像的高)
);
counter++;
// 如果模块渲染了 90%,就让整个图片显示出来。
if (counter > columns * rows * 0.9) {
context.drawImage(image, 0, 0);
} else {
requestAnimationFrame(animate);
}
}
完整代码
id="myCanvas"
width="900"
height="600"
style="background-color: black;"
>
let image = new Image();
image.src = "https://cdn.yinhengli.com/canvas-example.jpeg";
let canvas = document.getElementById("myCanvas");
let context = canvas.getContext("2d");
let boxWidth, boxHeight;
let rows = 10,
columns = 20,
counter = 0;
image.onload = function () {
boxWidth = image.width / columns;
boxHeight = image.height / rows;
requestAnimationFrame(animate);
};
function animate() {
let x = Math.floor(Math.random() * columns);
let y = Math.floor(Math.random() * rows);
context.drawImage(
image,
x * boxWidth, // 横坐标起始位置
y * boxHeight, // 纵坐标起始位置
boxWidth, // 图像的宽
boxHeight, // 图像的高
x * boxWidth, // 在画布上放置图像的 x 坐标位置
y * boxHeight, // 在画布上放置图像的 y 坐标位置
boxWidth, // 要使用的图像的宽度
boxHeight // 要使用的图像的高度
);
counter++;
if (counter > columns * rows * 0.9) {
context.drawImage(image, 0, 0);
} else {
requestAnimationFrame(animate);
}
}
总结
通过这个 Demo,我们使用了 canvasAPI 实现了图片的碎片加载效果,是不是特别简单!
html循环加载多个图片,两行代码实现图片碎片化加载相关推荐
- 两行代码实现图片压缩
两行代码实现图片压缩 相信大家经常会碰到上传图片的情景,如果图片过大,上传又有限制.这个时候就需要对图片进行压缩处理,截图有可能模糊或者尺寸依然较大,在线网站压缩又可能有隐私顾虑. 作为一个伪技术人员 ...
- java如何添加自定义的图片_java代码将图片加上自定义水印 -4
java代码将图片加上自定义水印,然后生成了新的图片 import java.awt.Color; import java.awt.Font; import java.awt.Graphics2D; ...
- html图片消失代码,HTML图片代码
HTML图片代码 2018-09-10 一.基础代码 二.加边框 1.普通黑色边框(浏览器默认黑色) 2.简单的CSS装饰框 ① ② ③ ④ ⑤ ⑥ ⑦ ⑧ 三.加CSS滤镜 1.无参数滤镜 ①黑白 ...
- android图片显示代码,Android图片处理:识别图像方向并显示(示例代码)
在Android中使用ImageView显示图片的时候发现图片显示不正.方向偏了或者倒过来了. 解决问题非常自然想到的分两步走:1.自己主动识别图像方向,计算旋转角度. 2.对图像进行旋转并显示. 一 ...
- 10款js图片代码_图片滚动代码_图片切换代码_图片特效代码_图片轮播代码(三)
jquery banner滑块导航条幻灯片轮播图片滚动 jQuery blockSlide插件熔岩灯标签导航banner焦点图片切换 jquery图片冒泡插件鼠标悬停图片冒泡动画展示 jquery h ...
- 10款js图片代码_图片滚动代码_图片切换代码_图片特效代码_图片轮播代码(一)
实现图片墙时光穿梭特效 swiper图文卡片滑块切换特效 网页放大镜图片预览插件 图片瀑布流tab分类切换特效 js窗帘式图片切换特效 全屏带视频banner轮播图片特效 Swiper仿魅族官网大图轮 ...
- html语言加图片,html代码——给图片加边框代码
图片加边框代码 这里教大家只需用html代码就能给你的图片加出各种漂亮的相框,使用方法,点"<>"加入代码,换上你的图片网址,适当调整宽度和颜色,就可以让你的图片锦上添 ...
- php图片添加代码,php图片添加文字水印实现代码_php技巧
php类库给现有的图片加文字水印,代码不是很完善,欢迎大家多多指教!代码如下: img(图片路径,水印文字,字体路径,字体大小,字体角度); 比如:$tpl->img('abc.jpg','这是 ...
- python3图片转代码_python3图片转换二进制存入mysql示例代码
python3图片转换二进制存入mysql示例代码 发布于 2014-09-29 18:00:01 | 198 次阅读 | 评论: 0 | 来源: 网友投递 Python编程语言Python 是一种面 ...
最新文章
- 【JDK7】新特性(2) 语法
- 文件查找命令find的使用
- MD5加密算法的一些知识
- Linux(UOS) Qt不能播放音频的问题
- complete checkbox in Fiori
- centos 关闭开启防火墙
- Linux中如何打开trn文件,如何通过trn日志文件恢复SQL Server
- 小米关联公司被列入经营异常
- Mysql 的 Explain性能分析
- php多线程扩展pthreads安装使用,swoole多进程,内置多进程
- HTML创建几个边框,使用HTML5创建多个边框
- hashMap底层原理
- UC浏览器去广告、联网、升级(支持新版8.1)
- 十八、D触发器介绍:
- Access2016学习8
- 华为鸿蒙操作系统国美通讯,国美通讯(600898)03月14日14:30大单揭秘
- win10 windows 键(徽标键) 失效解决办法
- Java实习生常规技术面试题每日十题Java基础(八)
- 12-Gateway新一代网关
- Eclipse中如何查看使用的JDK版本?
热门文章
- ES5-17/18 错误信息、try_catch、严格模式
- 数组去重的各种方式对比
- iScreenLocker 3.1.8 安卓锁屏通知--苹果一样的体验
- 这五张PPT告诉你,如何打造无人驾驶“最强大脑”
- php基础教程(三):变量
- windows mac 安装lua
- 基本 XAML 语法指南
- 使用Python连接数据库的脚本
- ubuntu下搭载LNMP环境,解决 fpm监听失败
- g menu i meun_长沙话读“这里”,到底是阁(gó)里还是该(gái)里