# 实现加载json文件图片
*****
>[info] 核心代码
~~~
<h2>loading...<span id="progress">0%</span></h2>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/PreloadJS/1.0.1/preloadjs.min.js"></script>
<script>
var queue = new createjs.LoadQueue(false);
//可以在此指定某个文件夹
// var queue = new createjs.LoadQueue(false, 'images/');
var progress = $("#progress");
//监听进度事件
queue.on("progress", function(e){
var proNum = Math.ceil(e.progress * 100);
progress.html( proNum + "%");
});
//监听完成事件
queue.on("complete", function(){
console.log("加载完成");
});
queue.loadManifest('img.json');
queue.on("fileload", function (e) {
// console.log(e.result);
$.each(e.result, function (i, n) {
console.log(n);
})
});
</script>
~~~
>[info] img.json代码
~~~
[{"id":1,"src":"images\/arrow.png"},{"id":1,"src":"images\/arrow.png"},{"id":1,"src":"images\/arrow.png"},{"id":1,"src":"images\/arrow.png"}]
~~~
- 总导航
- 第一章 前端
- 1.0 js自定义模板
- 第二章 PHP
- 1.0 推荐博客
- 2.0 基础理论
- 0.1 require和include区别
- 0.2 php运行机制
- 0.3 Http请求与响应
- 0.4 http响应状态
- 3.0 Laravel框架
- 0.1 Eloquent ORM
- 0.2 时间处理
- 0.3 数据迁移
- 0.4 填充数据
- 4.0 composer安装
- 5.0 缓存
- 0.1 Opcache
- 0.2 Memcache
- 0.3 Redis
- 0.4 Output buffer
- 第三章 MYSQL
- 1.0 新增和重置密码
- 第四章 前端插件集
- 1.0 PreloadJS
- 0.1 LoadQueue
- 0.2 加载单个文件
- 0.3 加载进度显示
- 0.4 加载指定目录图片
- 0.5 加载json图片
- 2.0 Swiper
- 3.0 ECharts
- 0.1 简单实例
- 0.2 title操作
- 0.3 tooltip操作
- 0.4 top显示数字
- 0.5 双数据显示
- 0.6 大数据缩放显示
- 0.7 综合
- 4.0 Vue
- 0.1 模板语法
- 0.2 条件与循环
- 0.3 处理用户输入
- 0.4 计算属性
- 0.5 事件绑定
- 0.6 动态渲染列表
- 5.0 layui
- 0.1 动态渲染nav
- 0.2 layer使用
- 6.0 IScroll
- 7.0 AlloyTouch
- 8.0 jquery.tagsinput
- 9.0 Editormd
- 第五章 应用软件
- 1.0 Xshell
- 一螺集
- PHP
- 打印一天的区间时间
- 友好时间输出
- 导出Excel
- JAVASCRIPT
- js回车事件