很多时候再项目中,我们往往需要先获取图片的大小再加载图片,但是某些特定场景,如用过cocos2d-js的人都知道,在它那里只能按比例缩放大小,是无法设置指定大小的图片的,这就是cocos2d-js 的坑了,我们必须先获取图片大小,计算比例再对图片进行缩放。
查阅资料,我总结了两种通过url获取图片大小的方法:
1.预加载获取图片大小
var imgLoad = function (url, callback) { ???var img = new Image(); ???img.src = url; ???if (img.complete) { ???????callback(img.width, img.height); ???} else { ???????img.onload = function () { ???????????callback(img.width, img.height); ???????????img.onload = null; ???????}; ???};};
此方法必须等待图片加载完毕才能获取尺寸,速度超慢,图片会先出现原本大小,一段时间后才进行缩放,体验差
2.封装的方法imgReady
var imgReady = (function () { ???var list = [], intervalId = null, ????// 用来执行队列 ???tick = function () { ???????var i = 0; ???????for (; i < list.length; i++) { ???????????list[i].end ? list.splice(i--, 1) : list[i](); ???????}; ???????!list.length && stop(); ???}, ????????// 停止所有定时器队列 ???stop = function () { ???????clearInterval(intervalId); ???????intervalId = null; ???}; ????return function (url, ready, load, error) { ???????var onready, width, height, newWidth, newHeight, ???????img = new Image(); ???????img.src = url; ???????// 如果图片被缓存,则直接返回缓存数据 ???????if (img.complete) { ???????????ready.call(img); ???????????load && load.call(img); ???????????return; ???????}; ????????????width = img.width; ???????height = img.height; ????????????// 加载错误后的事件 ???????img.onerror = function () { ???????????error && error.call(img); ???????????onready.end = true; ???????????img = img.onload = img.onerror = null; ???????}; ????????????// 图片尺寸就绪 ???????onready = function () { ???????????newWidth = img.width; ???????????newHeight = img.height; ???????????if (newWidth !== width || newHeight !== height ||newWidth * newHeight > 1024) { ???????????// 如果图片已经在其他地方加载可使用面积检测 ???????????????ready.call(img); ???????????????onready.end = true; ???????????}; ???????}; ???????onready(); ????????????// 完全加载完毕的事件 ???????img.onload = function () { ???????????// onload在定时器时间差范围内可能比onready快 ???????????// 这里进行检查并保证onready优先执行 ???????????!onready.end && onready(); ????????????????????????load && load.call(img); ????????????????????????// IE gif动画会循环执行onload,置空onload即可 ???????????img = img.onload = img.onerror = null; ???????}; ????????????// 加入队列中定期执行 ???????if (!onready.end) { ???????????list.push(onready); ???????????// 无论何时只允许出现一个定时器,减少浏览器性能损耗 ???????????if (intervalId === null) intervalId = setInterval(tick, 40); ???????}; ???};})();
方法调用:
imgReady(‘http://www.google.com.hk/intl/zh-CN/images/logo_cn.png‘, function () { ???alert(‘size ready: width=‘ + this.width + ‘; height=‘ + this.height);});
方法二体验下好很多,速度也很快,建议使用。
通过url动态获取图片大小方法总结
原文地址:https://www.cnblogs.com/wangxiaoling/p/9881920.html