<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script type="text/javascript"> var newload= function(){ urlone="http://www.leyoo.com/Public/nImg/Zhuanti/20131231/run_img_" urllast=".png" for(var i=1; i<9; i++) { url = urlone + i + urllast; oid = "im"+i; imgReady(url,function(){fimg(this.width,this.height)}); } } var fimg=function(x,y){ document.getElementById(oid).width = x; document.getElementById(oid).height = y; document.getElementById(oid).src = url; } //下面是封装好的方法 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> </head> <body> <a onClick="newload()">点击</a> <img src="http://pic12.nipic.com/20110209/2897814_144041223195_2.gif" id="im1" /> <img src="http://pic12.nipic.com/20110209/2897814_144041223195_2.gif" id="im2"/> <img src="http://pic12.nipic.com/20110209/2897814_144041223195_2.gif" id="im3"/> <img src="http://pic12.nipic.com/20110209/2897814_144041223195_2.gif" id="im4"/> <img src="http://pic12.nipic.com/20110209/2897814_144041223195_2.gif" id="im5"/> <img src="http://pic12.nipic.com/20110209/2897814_144041223195_2.gif" id="im6"/> <img src="http://pic12.nipic.com/20110209/2897814_144041223195_2.gif" id="im7"/> <img src="http://pic12.nipic.com/20110209/2897814_144041223195_2.gif" id="im8"/> </body> </html>
a && b : 将a, b转换为Boolean类型, 再执行逻辑与, true返回b, false返回a
a || b : 将a,
b转换为Boolean类型, 再执行逻辑或, true返回a,
false返回b
转换规则:
对象为true
非零数字为true
非空字符串为true
其他为false