很多時(shí)候再項(xiàng)目中，我們往往需要先獲取圖片的大小再加載圖片，但是某些特定場(chǎng)景，如用過(guò)cocos2d-js的人都知道，在它那里只能按比例縮放大小，是無(wú)法設(shè)置指定大小的圖片的，這就是cocos2d-js 的坑了，我們必須先獲取圖片大小，計(jì)算比例再對(duì)圖片進(jìn)行縮放。
查閱資料，我總結(jié)了兩種通過(guò)url獲取圖片大小的方法：
1.預(yù)加載獲取圖片大小
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; }; };};此方法必須等待圖片加載完畢才能獲取尺寸，速度超慢，圖片會(huì)先出現(xiàn)原本大小，一段時(shí)間后才進(jìn)行縮放，體驗(yàn)差
2.封裝的方法imgReady
var imgReady = (function () { var list = [], intervalId = null, // 用來(lái)執(zhí)行隊(duì)列 tick = function () { var i = 0; for (; i < list.length; i++) { list[i].end ? list.splice(i--, 1) : list[i](); }; !list.length && stop(); }, // 停止所有定時(shí)器隊(duì)列 stop = function () { clearInterval(intervalId); intervalId = null; }; return function (url, ready, load, error) { var onready, width, height, newWidth, newHeight, img = new Image(); img.src = url; // 如果圖片被緩存，則直接返回緩存數(shù)據(jù) if (img.complete) { ready.call(img); load && load.call(img); return; }; width = img.width; height = img.height; // 加載錯(cuò)誤后的事件 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) { // 如果圖片已經(jīng)在其他地方加載可使用面積檢測(cè) ready.call(img); onready.end = true; }; }; onready(); // 完全加載完畢的事件 img.onload = function () { // onload在定時(shí)器時(shí)間差范圍內(nèi)可能比onready快 // 這里進(jìn)行檢查并保證onready優(yōu)先執(zhí)行 !onready.end && onready(); load && load.call(img); // IE gif動(dòng)畫(huà)會(huì)循環(huán)執(zhí)行onload，置空onload即可 img = img.onload = img.onerror = null; }; // 加入隊(duì)列中定期執(zhí)行 if (!onready.end) { list.push(onready); // 無(wú)論何時(shí)只允許出現(xiàn)一個(gè)定時(shí)器，減少瀏覽器性能損耗 if (intervalId === null) intervalId = setInterval(tick, 40); }; };})();方法調(diào)用：
imgReady('http://www.google.com.hk/intl/zh-CN/images/logo_cn.png', function () { alert('size ready: width=' + this.width + '; height=' + this.height);});方法二體驗(yàn)下好很多，速度也很快，建議使用。
總結(jié)
以上所述是小編給大家介紹的JS中通過(guò)url動(dòng)態(tài)獲取圖片大小的方法小結(jié)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)VeVb武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
