1、vue中 @load=function(){}
等待img加载完触发load函数
2、window.load=function(){var imgheight=$(".btnimg").height;}
当一个图片很大的时候这个方法将一直不执行(图片少当然看不出异常)
3、定时器循环是否图片都已经加载完全
var t_img; // 定时器 var isLoad = true; // 控制变量 //isImgLoad函数在所有图片加载完成后执行 isImgLoad(function(){ var imgheight=$(".btnimg").height; // 获取图片高度 }); // 判断图片加载的函数 function isImgLoad(callback){ // 这里需要获取的图片类名都是btnimg,只判断这些图片而不受其他大图的影响 $('.btnimg').each(function(){ // 找到为0就将isLoad设为false,并退出each if(this.height === 0){ isLoad = false; return false; } }); // 如果isLoad为true,即目标图片没有发现为0的。默认为加载完毕 if(isLoad){ clearTimeout(t_img); // 清除定时器 // 回调函数 callback(); }else{ // 为false,因为找到了没有加载完成的图,将调用定时器递归 isLoad = true; t_img = setTimeout(function(){ isImgLoad(callback); // 递归扫描,再次执行判断图片是否加载函数 },500); // 我这里设置的是500毫秒就扫描一次,可以自己调整 } }
4、图片预加载
var imgReady = (function(){ var list = [], intervalId = null; // 用来执行队列 var queue = function(){ for(var i = 0; i < list.length; i++){ list[i].end ? list.splice(i--,1) : list[i](); } !list.length && stop(); }; // 停止所有定时器队列 var stop = function(){ clearInterval(intervalId); intervalId = null; } return function(url, ready, error) { var onready = {}, width, height, newWidth, newHeight, img = new Image(); img.src = url; // 如果图片被缓存,则直接返回缓存数据 if(img.complete) { ready.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; }; // 图片尺寸就绪 var 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(); // IE gif动画会循环执行onload,置空onload即可 img = img.onload = img.onerror = null; }; // 加入队列中定期执行 if (!onready.end) { list.push(onready); // 无论何时只允许出现一个定时器,减少浏览器性能损耗 if (intervalId === null) { intervalId = setInterval(queue, 40); }; }; } })();
http://www.cnblogs.com/tugenhua0707/p/3525668.html