国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

JS中通過url動態獲取圖片大小的方法小結(兩種方法)

來源:懂視網 責編:小采 時間:2020-11-27 22:05:38
文檔

JS中通過url動態獲取圖片大小的方法小結(兩種方法)

JS中通過url動態獲取圖片大小的方法小結(兩種方法):很多時候再項目中,我們往往需要先獲取圖片的大小再加載圖片,但是某些特定場景,如用過cocos2d-js的人都知道,在它那里只能按比例縮放大小,是無法設置指定大小的圖片的,這就是cocos2d-js 的坑了,我們必須先獲取圖片大小,計算比例再對圖片進行縮放。 查
推薦度:
導讀JS中通過url動態獲取圖片大小的方法小結(兩種方法):很多時候再項目中,我們往往需要先獲取圖片的大小再加載圖片,但是某些特定場景,如用過cocos2d-js的人都知道,在它那里只能按比例縮放大小,是無法設置指定大小的圖片的,這就是cocos2d-js 的坑了,我們必須先獲取圖片大小,計算比例再對圖片進行縮放。 查

很多時候再項目中,我們往往需要先獲取圖片的大小再加載圖片,但是某些特定場景,如用過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);
});

方法二體驗下好很多,速度也很快,建議使用。

總結

以上所述是小編給大家介紹的JS中通過url動態獲取圖片大小的方法小結,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

JS中通過url動態獲取圖片大小的方法小結(兩種方法)

JS中通過url動態獲取圖片大小的方法小結(兩種方法):很多時候再項目中,我們往往需要先獲取圖片的大小再加載圖片,但是某些特定場景,如用過cocos2d-js的人都知道,在它那里只能按比例縮放大小,是無法設置指定大小的圖片的,這就是cocos2d-js 的坑了,我們必須先獲取圖片大小,計算比例再對圖片進行縮放。 查
推薦度:
標簽: 圖片 獲取 尺寸
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板: 亚洲欧美在线视频 | 青青国产在线 | 精品欧美一区二区在线观看欧美熟 | 图片专区亚洲 欧美 另类 | 国产精品九九久久精品女同 | 国产精品不卡在线 | 亚洲欧美日韩在线一区 | 久久大陆 | 午夜精品久久久久久91 | 欧美在线观看一区 | 国产成人精品久久一区二区三区 | 日本一二三区高清 | 国产成人久久久精品一区二区三区 | 成人无码一区二区片 | 国产亚洲一区二区三区在线 | 国产一在线 | 在线观看国产亚洲 | 日本精品久久久一区二区三区 | 国产成人在线看 | 欧美日韩不卡在线 | 欧美激情首页 | 在线播放一区二区三区 | 欧美不卡激情三级在线观看 | 亚洲第一视频 | 精品一区二区三区免费观看 | 国产高清在线精品一区二区三区 | 亚洲欧美综合网 | 国产不卡视频在线观看 | 国产精品视频播放 | 欧美不卡在线观看 | 中文字幕免费在线播放 | 久久国产热 | 午夜视频在线免费观看 | 国产精品va一级二级三级 | 欧美一区二区在线观看视频 | 欧美日韩三区 | 国产精品 视频一区 二区三区 | 欧美在线观看一区 | 亚洲一区二区三区成人 | 99久久国产综合精品麻豆 | 欧美日韩高清一区二区三区 |