新闻动态

   

您现在的位置是:首页 » 新闻动态 » 资源分享


js读取图片头部数据获取图片尺寸


人气: 2410  日期: 2013-02-14  作者: 大向网络  [打印本文]

javascript读取图片头部数据来获取获取图片尺寸,这样做的目的就是和浏览器一样的速度迅速的获取到图片尺寸,然后对图片尺寸做处理。


js读取图片头部数据获取图片尺寸 - 点击图片查看演示


比如通常页面加载一张很大的图片,网站页面需要对这个大的图片进行等比缩放,这个时候问题就来了,如果图片没有加载完成的时候,通常的js或者jquery方法都不能获取到图片尺寸,但是浏览器可以在图片的头部数据加载就来的时候就已经获取到图片的尺寸大小了。这个js插件就是利用浏览器获取图片的头部数据这个原理获取图片尺寸的。


这个读取图片头部数据js/jquery插件,你可以用原生js调用,也可以混合在jquery中调用,调用方法如下:
$(function(){
var imgUrl =$("img").attr("src");
// 参数: 图片地址, 尺寸就绪事件, 完全加载事件, 加载错误事件
imgReady(imgUrl,function () {
//尺寸就绪事件
//alert("width:"+this.width+"height:"+this.height);
//这个地方可以直接写jquery代码 如下:
//alert("haha:"+$("img").width());
if(this.width>1000){
$("img").width("500px");
}
},function(){
//完全加载
alert("完全加载")
},function(){
//加载错误事件
alert("加载错误")
});
});





js/jquery读取图片头部数据来获取获取图片尺寸插件代码:
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);
};
};
})();

  上一篇:jQuery单行文字上下不间断循环滚动效果,适合做新闻滚动推荐
  下一篇:PHP利用jquery生成各种验证码和Ajax验证
相关文章(Tags:js读取图片头部数据获取图片尺寸,javascript)