1、用原生js来判断图片加载，
document.getElementById("img2").onload=function(){}
2、如果用多种图片，用jquery来判断呢，应该是这样吧？
$("").load(function(){...});
中选择器是图片的id或class，function里面的方法就是回调函数，在图片加载完成后执行，但是我试验了很多，压根儿不是那么回事，正确的解决方法是：
$("#imageId").load(function(){
alert("加载完成！");
});
3、在网上找到一段代码，写好的一个
function loadImage(url, callback) { var img = new Image(); //创建一个Image对象，实现图片的预下载 img.src = url; if(img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数 callback.call(img); return; // 直接返回，不用再处理onload事件 } img.onload = function () { //图片下载完毕时异步调用callback函数。 callback.call(img);//将回调函数的this替换为Image对象 }; };
callback回调行数，就是判断图片加载完成后要运行的函数
4、下面是针对多个image的加载判断。
var imgdefereds=[]; $('img').each(function(){ var dfd=$.Deferred(); $(this).bind('load',function(){ dfd.resolve(); }).bind('error',function(){ //图片加载错误，加入错误处理 // dfd.resolve(); }) if(this.complete) setTimeout(function(){ dfd.resolve(); },1000); imgdefereds.push(dfd); }) $.when.apply(null,imgdefereds).done(function(){ callback(); });
使用这种方法就可以避免window.onload的不足，不过代码稍显复杂 在性能方面比起window.onload经强很多。
5、最后我写的一个图片等比例缩放居中显示的jquery插件的dome
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>图片按比例自适应缩放</title> 6 <script src="jquery.js"></script> 7 <style> 8 .list1, 9 .list2{overflow: hidden;margin:20px 0;} 10 .list1 li, 11 .list2 li{ 12 float:left; 13 margin:10px; 14 text-align: center; 15 200px; 16 height: 300px; 17 border: 1px solid #ddd; 18 overflow: hidden; 19 } 20 </style> 21 </head> 22 <body> 23 <div class="list1"> 24 <ul> 25 <li><img src="http://www.wallcoo.com/1920x1440/1920x1440_nature_wallpapers_02/wallpapers/1920x1440/%5Bwallcoo.com%5D_1920X1440_nature_wallpapers_aVistas006.jpg" alt="alipay"/></li> 26 <li><img src="http://img2.cache.hxsd.com/game/2012/01/13/646913_1326427920_3.jpg" alt="alipay"/></li> 27 <li><img src="http://image.big5.made-in-china.com/2f0j01aBnEQSLGvRuF/D%E5%9E%8B%E6%89%A3%EF%BC%88P10004%EF%BC%89.jpg" alt="alipay"/></li> 28 <li><img src="http://i3.hexunimg.cn/2015-12-31/181542031.jpg" alt="alipay"/></li> 29 </ul> 30 </div> 31 <div class="list2"> 32 <ul> 33 <li><img src="http://i1.sinaimg.cn/gm/2013/0826/U4670P115DT20130826173112.jpg" alt="alipay"/></li> 34 <li><img src="http://cdn.duitang.com/uploads/item/201305/27/20130527155926_GjC8x.jpeg" alt="alipay"/></li> 35 <li><img src="http://www.012logo.com/webpic/D%B1%EA%D6%BElogo%C9%E8%BC%C6%D7%F7%C6%B7%20%2824%29.png" alt="alipay"/></li> 36 <li><img src="http://img4q.duitang.com/uploads/item/201506/27/20150627073905_kJXEn.jpeg" alt="alipay"/></li> 37 </ul> 38 </div> 39 <script> 40 $.fn.resizeImg = function (opt) { 41 var imgdefereds = []; 42 return this.each(function () { 43 opt = $.extend({ 44 maxWidth: 150, 45 maxHeight: 200 46 }, opt); 47 48 var $self = $(this); 49 50 $self.hide(); 51 var dfd = $.Deferred(); 52 $(this).bind('load', function () { 53 dfd.resolve(); 54 }).bind('error', function () { 55 //图片加载错误，加入错误处理 56 // dfd.resolve(); 57 }) 58 if (this.complete) setTimeout(function () { 59 dfd.resolve(); 60 }, 1000); 61 imgdefereds.push(dfd); 62 $.when.apply(null, imgdefereds).done(function () { 63 var w = $self.outerWidth(), 64 h = $self.outerHeight(); 65 $self.css('position', 'relative'); 66 $self.show(); 67 // 当图片比预览区域小时不做任何改变 68 if (w < opt.maxWidth && h < opt.maxHeight){ 69 $self.css('top', (opt.maxHeight - h) / 2); 70 return; 71 } 72 // 当实际图片比例大于预览区域宽高比例时 73 // 缩放图片宽度，反之缩放图片宽度 74 if (w / h > opt.maxWidth / opt.maxHeight) { 75 $self.width(opt.maxWidth); 76 $self.css('top', (opt.maxHeight - h * opt.maxWidth / w) / 2); 77 } else { 78 $self.height(opt.maxHeight); 79 } 80 }); 81 }); 82 83 } 84 $(document).ready(function () { 85 $('.list1 img').resizeImg({ 86 maxWidth: 200, 87 maxHeight: 300 88 }); 89 $('.list2 img').resizeImg({ 90 maxWidth: 200, 91 maxHeight: 300 92 }); 93 }); 94 95 96 </script> 97 </body> 98 </html>