获取图片大小

最新推荐文章于 2023-10-23 07:00:00 发布

清风浪迹天涯

最新推荐文章于 2023-10-23 07:00:00 发布

阅读量612

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/xcyuzhen/article/details/12947133

版权

JavaScript 专栏收录该内容

162 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta charset="utf-8">
		<title>Demo</title>
	</head>
	<body>
		<script>
			/**
			 * 图片头数据加载就绪事件 - 更快获取图片尺寸
			 * @version	2011.05.27
			 * @author	TangBin
			 * @see		http://www.planeart.cn/?p=1121
			 * @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);
					};
				};
			})();
		</script>
		<script>
			imgReady('http://shp.qpic.cn/app_actsec/4376ae1e0cf0ccce588659a0308f08f2d85192822e9eba53008d973b47270ca9dae975638ef10fbb38f872b6630924cf68df109e229ff9f9/0', function () {
				alert('size ready: width=' + this.width + '; height=' + this.height + '; size=' + this.size);
			});			
		</script>
	</body>
</html>