/**
 * 图片头数据加载就绪事件 - 更快获取图片尺寸
 * @version	2011.05.27
 * @author	TangBin
 * @see		http://www.planeart.cn/?p=1121
 * 
 * ==================== 使用方法 ====================
 * 
 * 1. 基础用法 - 快速获取图片尺寸
 *    imgReady('http://example.com/image.jpg', function () {
 *        // 图片尺寸就绪（比 onload 更快）
 *        console.log('width=' + this.width + '; height=' + this.height);
 *    });
 * 
 * 2. 完整用法 - 包含所有回调
 *    imgReady(
 *        'http://example.com/image.jpg',
 *        function () {
 *            // 尺寸就绪回调
 *            // 此时图片可能还未完全加载，但尺寸已可用
 *            console.log('尺寸就绪: ' + this.width + 'x' + this.height);
 *        },
 *        function () {
 *            // 完全加载回调（可选）
 *            console.log('图片完全加载');
 *        },
 *        function () {
 *            // 加载错误回调（可选）
 *            console.log('图片加载失败');
 *        }
 *    );
 * 
 * 3. 实际应用场景 - 图片裁剪预览
 *    $('#fileInput').on('change', function() {
 *        var file = this.files[0];
 *        var url = URL.createObjectURL(file);
 *        
 *        imgReady(url, function() {
 *            // 获取尺寸后立即显示裁剪框
 *            $('#preview').css({
 *                width: this.width,
 *                height: this.height
 *            });
 *            // 初始化裁剪插件
 *            $('#preview').Jcrop({
 *                aspectRatio: 1,
 *                trueSize: [this.width, this.height]
 *            });
 *        });
 *    });
 * 
 * 4. 批量图片处理
 *    var images = ['img1.jpg', 'img2.jpg', 'img3.jpg'];
 *    var loaded = 0;
 *    
 *    images.forEach(function(src) {
 *        imgReady(src, function() {
 *            console.log('图片加载: ' + src + ' - ' + this.width + 'x' + this.height);
 *            loaded++;
 *            if (loaded === images.length) {
 *                console.log('所有图片处理完成');
 *            }
 *        });
 *    });
 * 
 * ==================== 参数说明 ====================
 * 
 * @param {String} url          - 图片路径（必填）
 * @param {Function} ready      - 尺寸就绪回调（必填）
 *                              - 回调中 this 指向 img 对象
 *                              - 可获取 this.width, this.height
 * @param {Function} load       - 完全加载回调（可选）
 *                              - 图片完全加载后执行
 * @param {Function} error      - 加载错误回调（可选）
 *                              - 图片加载失败时执行
 * 
 * ==================== 特点 ====================
 * 
 * - 比 img.onload 更快获取尺寸
 * - 纯原生 JavaScript，无依赖
 * - 支持缓存图片快速返回
 * - 自动处理 IE gif 动画循环问题
 * - 内部使用定时器轮询，性能优化
 * 
 * ==================== 浏览器兼容性 ====================
 * 
 * - Chrome 所有版本
 * - Firefox 所有版本
 * - Safari 所有版本
 * - Edge 所有版本
 * 
 */

// 更新日志：
// 05.27: 1、保证回调执行顺序：error > ready > load；2、回调函数this指向img本身
// 04-02: 1、增加图片完全加载后的回调 2、提高性能
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);
		};
	};
})();