JS：提前读取图片大小

最新推荐文章于 2024-09-30 14:28:41 发布

weixin_34310369

最新推荐文章于 2024-09-30 14:28:41 发布

阅读量104

点赞数

文章标签： javascript xhtml php ViewUI

原文链接：https://my.oschina.net/cimu/blog/161547

版权

为什么80%的码农都做不了架构师？>>>

预加载js：imgReady.js

/** 
 * 图片头数据加载就绪事件 - 更快获取图片尺寸 
 * @version 2011.05.27 
 * @author TangBin 
 * @see 
http://www.planeart.cn/?p=1121    
http://www.blueidea.com/tech/web/2011/8335.asp   
http://developer.51cto.com/art/201103/249624.htm 
 * @param {String} 图片路径 
 * @param {Function} 尺寸就绪 
 * @param {Function} 加载完毕 (可选) 
 * @param {Function} 加载错误 (可选) 
 * @example imgReady('http://www.google.com.hk/intl/zh-CN/images/logo_cn.png', function () { 
alert('size ready: width=' + this.width + '; height=' + this.height); 
}); 
 */ 
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); 
}; 
}; 
})();

示例网页：

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>img ready demo</title> 
<script src="imgReady.js"></script> 
<style> 
/*demo style*/ 
body { font:12px 'Microsoft Yahei', Tahoma, Arial; _font-family:Tahoma, Arial; } 
a { color:#0259C4; } 
a:hover { color:#900; } 
.tips { color:#CCC; } 
h1 { font-family:'Constantia';} 
#path { width:36em; padding:5px; border:2px solid #0259C4; background:#FAFAFA;-webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; } 
#path:focus { background:#FFFFF7; outline:0; } 
#submit { padding:5px 10px; border:2px solid #0259C4; background:#0259C4; color:#FFF; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; cursor:pointer; } 
#submit.disabled { background:#D7D7D7; color:#ABABAB; border-color:#ABABAB; cursor:default; } 
</style> 
<script> 
/* demo script */ 
window.onload = function () { 

var $ = function (id) { 
return document.getElementById(id); 
}; 

var Timer = function (){ 
this.startTime = (new Date()).getTime(); 
}; 
Timer.prototype.stop = function(){ 
return (new Date()).getTime() - this.startTime; 
}; 

var imgUrl, 
checkboxFn, 
path = $('path'), 
submit = $('submit'), 
checkbox = $('checkbox'), 
clsCache = $('clsCache'), 
status = $('status'), 
statusReady = $('statusReady'), 
statusLoad = $('statusLoad'), 
imgWrap = $('imgWrap'); 

submit.disabled = false; 
submit.onclick = function () { 
var that = this, 
time = new Timer(); 

imgUrl = path.value; 
status.style.display = 'block'; 
statusLoad.innerHTML = statusReady.innerHTML = 'Loading...'; 

// 参数: 图片地址, 尺寸就绪事件, 完全加载事件, 加载错误事件 
imgReady(imgUrl, function () { 
statusReady.innerHTML = '耗时 ' + (time.stop() / 1000) +' 秒. 宽度: ' + this.width + '; 高度: ' + this.height; 
checkboxFn(); 
}, function () { 
statusLoad.innerHTML = '耗时 ' + (time.stop() / 1000) +' 秒. 宽度: ' + this.width + '; 高度: ' + this.height; 
}, function () { 
statusLoad.innerHTML = statusReady.innerHTML = '耗时 ' + (time.stop() / 1000) +' 秒. 加载错误！'; 
}); 
};

clsCache.onclick = function () {
var value = path.value;
path.value = (value.split('?')[1] ? value.split('?')[0] : value) + '?' + new Date().getTime();
status.style.display = 'none';
imgWrap.innerHTML = '';
return false;
};
checkbox.onclick = checkbox.onchange = checkboxFn = function () {
imgWrap.innerHTML = imgUrl && checkbox.checked ? '<img src="' + imgUrl + '" />' : '';
};
checkbox.checked = false;
$('down').onclick = function () {
window.open(this.getAttribute('data-href') || this.href); 
return false;
}
};
</script>
</head>

<body>
<div class="demoInfo">
<h1>imgReady</h1>
<p class="tips">图片头数据加载就绪事件</p>
<p><strong>下载：</strong></p>
<p><a id="down" data-href="http://goo.gl/KBp5a" href="http://www.planeart.cn/demo/imgReady/imgReady.js">imgReady.js</a></p>
<p><strong>相关文章：</strong></p>
<p><a href="http://www.planeart.cn/?p=1121">再谈javascript图片预加载技术</a></p>
<p><strong>演示：</strong></p>
</div>

<div style="height:40px; line-height:40px;"><input type="text" id="path" value="http://www.planeart.cn/demo/imgReady/vistas24.jpg" /> <input type="button" id="submit" value="加 载" /> <label><input id="checkbox" type="checkbox">显示图片</label> 
<a id="clsCache" href="#" style="color:#0259C4;">清空缓存</a><em class="tips">（浏览器会缓存加载过后的图片）</em></div>
<div id="status" style="display:none">
  <p><strong>通过文件头信息获取尺寸：</strong> <span id="statusReady"></span><p>
<p><strong>通过加载完毕后获取尺寸：</strong> <span id="statusLoad"></span></p>
</div>

<div id="imgWrap"></div>

<div>

<script type="text/javascript">document.write('<scr'+'ipt src="http://s86.cnzz.com/stat.php?id=1581115&web_id=1581115" type="text/javascript" charset="gb2312"></sc'+'ript>')

</div> 
</body>
</html>

转载于:https://my.oschina.net/cimu/blog/161547