这里说的是在需要的使用加载图片,比如游戏中的某个关卡的图片,不用在游戏一开始就加载(万一用户玩不到那关,岂不是很冤,流量费了那么多),否则 载入速度也慢。这种方式加载资源要用到cc.loader官方文档上有介绍(http://www.cocos2d-x.org/docs/manual/framework/html5/v3/cc-loader/zh),主要有

  • loadJs
  • loadJsWithImg
  • loadTxt
  • loadBinary
  • loadImg
  • loadJson

文档给出了一个例子如下:

cc.loader.loadTxt("res/a.txt", function(err, data){
if(err) return console.log("load failed");
//success
});

可见loadTxt中的第二个是一个回调函数(等待ajax数据返回后调用),文档中对启动load系列函数参数都没有说,其实都是如此,回调函数第一个 参数表示是否有错误发生(成功的话是null),第二个参数data表示本次请求返回的数据(不同load系列函数会对返回数据进行一个解析,就是解析的 结果了,比如loadImg)。其实第一次看文档的时候没看到这段示例代码,全是回调函数只有一个参数的示例代码,当时我就想啊,尼玛这异步调用数据怎么 取啊?文档也不说一声,只好去看源码,开源的好处就是这样,以下是loadBinary的代码:

/**
* Load binary data by url.
* @function
* @param {String} url
* @param {Function} [cb]
*/
cc.loader.loadBinary = function (url, cb) {
var self = this;
var xhr = this.getXMLHttpRequest(),
errInfo = "load " + url + " failed!";
xhr.open("GET", url, true);
if (/msie/i.test(navigator.userAgent) && !/opera/i.test(navigator.userAgent)) {
// IE-specific logic here
xhr.setRequestHeader("Accept-Charset", "x-user-defined");
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var fileContents = cc._convertResponseBodyToText(xhr["responseBody"]);
cb(null, self._str2Uint8Array(fileContents));
} else cb(errInfo);
};
} else {
if (xhr.overrideMimeType) xhr.overrideMimeType("text\/plain; charset=x-user-defined");
xhr.onload = function () {
xhr.readyState == 4 && xhr.status == 200 ? cb(null, self._str2Uint8Array(xhr.responseText)) : cb(errInfo);
};
}
xhr.send(null);
};
cc.loader._str2Uint8Array = function (strData) {
if (!strData)
return null;
var arrData = new Uint8Array(strData.length);
for (var i = 0; i < strData.length; i++) {
arrData[i] = strData.charCodeAt(i) & 0xff;
}
return arrData;
};

可以看到这里对回调函数的调用:

xhr.readyState == 4 && xhr.status == 200 ? cb(null, self._str2Uint8Array(xhr.responseText)) : cb(errInfo);

再来给出一个自己的使用实例(加载游戏关卡的参数和图片):

/* helper function to fetch level data using ajax */
var fetch_level = function(level, callback, callback_data) {
cc.loader.loadJson("api/level/" + level, function (x, new_level_data) {
cc.log("fetch level json data:", new_level_data);
current_level_data = new_level_data;
cc.loader.loadImg(current_level_data.photo, function (x, img) {
cc.log("fetch level photo img:", img);
current_level_data.img = img;
if (!!callback) {
callback(callback_data);
}
})
})
};

至于如何动态加载远程图片,研究结果如下(可以用):

		var that = this;
var url = "http://www.bookgogo.com/Public/Images/weixinini.png";
cc.loader.loadImg(url, null, function(err,img){
var logo = new cc.Sprite(img);
that.addChild(logo,10);
logo.x = size.width / 2;
logo.y = size.height / 2;
});

Cocos2d-js异步图片加载的更多相关文章

  1. js判断图片加载完成后获取图片实际宽高

    通常,我们会用jq的.width()/.height()方法获取图片的宽度/高度或者用js的.offsetwidth/.offsetheight方法来获取图片的宽度/高度,但这些方法在我们通过样式设置 ...

  2. nginx实现动态分离,解决css和js等图片加载问题

    改帖专门为使用nginx,通过nginx把请求转发到web服务器再返回客户端的时候,解决css和js和图片加载不出来的问题. 如果没安装nginx,请访问一下地址进行安装 http://www.cnb ...

  3. YYWebImage——iOS异步图片加载框架

    本文转载至 http://www.mobile-open.com/2015/86582.html   YYWebImage 是一个异步图片加载框架 (YYKit 组件之一). 其设计目的是试图替代 S ...

  4. Android高效异步图片加载框架

    概述 Android高效异步图片加载框架:一个高效的异步加载显示的图片加载框架,同时具备图片压缩,缓存机制等特性. 详细 代码下载:http://www.demodashi.com/demo/1214 ...

  5. Android 框架修炼-自己开发高效异步图片加载框架

    一.概述 目前为止,第三方的图片加载框架挺多的,比如UIL , Volley Imageloader等等.但是最好能知道实现原理,所以下面就来看看设计并开发一个加载网络.本地的图片框架. 总所周知,图 ...

  6. js img图片加载失败,重新加载+断网检查

    我们常常会遇到img加载图片的时候因为网络问题或者图片过大导致图片加载失败的问题,页面就因为这张蹦掉的图变得不美观.所以我们需要图片加载失败的时候重新加载图片,前端图片加载优化 //js方法定义 fu ...

  7. (js有关图片加载问题)dom加载完和onload事件

    引用旺旺的话...哈哈哈DOMContentLoaded事件表示页面的DOM结构绘制完成了,这时候外部资源(带src属性的)还没有加载完.而onload事件是等外部资源都加载完了就触发的.$.read ...

  8. JS判断图片加载完成方法

    javascipt原生方法 选取指定ID的图片,通过onload指定回调方法,在图片加载完成后弹出“图片加载已完成”字样提示. <img id="pic1" src=&quo ...

  9. iOS异步图片加载优化与常用开源库分析

    网络图片显示大体步骤: 1.下载图片: 2.图片处理(裁剪,边框等): 3.写入磁盘: 4.从磁盘读取数据到内核缓冲区: 5.从内核缓冲区复制到用户空间(内存级别拷贝): 6.解压缩为位图(耗cpu较 ...

  10. 转: listview异步图片加载之优化篇(android)

    Listview异步加载之优化篇 关于listview的异步加载,网上其实很多示例了,总体思想差不多,不过很多版本或是有bug,或是有性能问题有待优化.有鉴于此,本人在网上找了个相对理想的版本并在此基 ...

随机推荐

  1. 【2018.4.5】Shoi2017题集

    这三道题分别对应bzoj4868~4870,pdf没法往这放,因此放弃了. T1: 方法1(正解):三分法 考虑暴力枚举最晚公布的时间x,关注到2操作是没有负面影响的1操作,所以如果A大于B,那么只需 ...

  2. 浅谈java内存泄漏

    最近有朋友遇到个问题,tomcat在运行几天后就会报outofmemory,然后就死了,我就稍微总结了下内存泄漏的一些原因,纯属个人理解,欢迎大侠们劈砖: 一.字符串问题 这个也是一个常见的问题,我们 ...

  3. 在GridView中的每一页末尾添加空行

    原文发布时间为:2008-08-03 -- 来源于本人的百度文章 [由搬家工具导入] protected void GridView1_RowCreated(object sender, GridVi ...

  4. linux 安裝jdk

    參考博客:http://www.cnblogs.com/wuqianling/p/5381895.html http://www.cnblogs.com/CuteNet/p/3947193.html ...

  5. Influx kafka

    http://www.opscoder.info/kafka-influxdb.html

  6. AC日记——[USACO1.1]坏掉的项链Broken Necklace 洛谷 P1203

    题目描述 你有一条由N个红色的,白色的,或蓝色的珠子组成的项链(3<=N<=350),珠子是随意安排的. 这里是 n=29 的二个例子: 第一和第二个珠子在图片中已经被作记号. 图片 A ...

  7. PYTHON 源码

    http://www.wklken.me/index2.html http://blog.csdn.net/dbzhang800/article/details/6683440

  8. oracle学习 第二章 限制性查询和数据的排序 ——03

    这里.我们接着上一小节2.6留下的问题:假设要查询的字符串中含有"_"或"%".又该如何处理呢? 開始今天的学习. 2.7  怎样使用转义(escape)操作符 ...

  9. iOS App 项目:会员卡管理系统设计方案

    1.需求描写叙述 店主须要管理自己的会员信息和充值卡信息以及消费纪录 店主觉得购买电脑和外设成本太高,并且店面没有地方容纳这些设备 店主希望通过手机来完毕这些功能.但尽量不产生流量.对网络要求较低 店 ...

  10. BUPT复试专题—中序遍历序列(2013)

    题目描述 给出一个序列,判断该序列是不是某二叉搜索树的中序遍历序列,如果是输出"Yes",否则输出"No".一颗带权二叉树是一颗二叉搜索树(二叉排序树),当且仅 ...