imgload('http://pal4.baiyou100.com/pal4index_files/pic/pic_d_20.jpg',function(a,b){
document.title="图片宽度"+a+"高度"+b;
以上代码必须等待图片加载完成才能获取图片尺寸。
以下前辈的代码通过javascript定时侦测图片的尺寸状态就可以知道图片尺寸是否加载完成,可以在图片加载完成前获取图片大小。
<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<script type="text/javascript">
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);
})();
//测试代码
var url = 'http://pal4.baiyou100.com/pal4index_files/pic/pic_d_20.jpg?'+new Date()*1; //不缓存的图片地址
imgReady(url,function(){
document.body.innerHTML='图片尺寸加载完毕,宽度为'+this.width+'高度为'+this.height;
},function(){
document.body.appendChild(this);
},function(){
图片加载失败
</script>
</body>
</html>
经过测试发现确实快了很多!
对于
newWidth
*
newHeight
>
1024
主要针对WebKit 浏览器一开始就已经被撑开了 目前测试的浏览器不会有此问题 此条完全没必要了
关于前辈的定时器有装逼之嫌,不过还是有学习的价值!
下面是另一位前辈写的