js 一个关于图片onload加载的事

       前几天一个项目让我头疼了好久，一个关于图片加载时的loading效果，由于不是太懂js，因此在网上各类找资料，但仍是不理想，无赖苦心研究，终于有了一点眉目了，虽然个中还有一些道理不懂，至少目的达到了;

      首先先明确一下我要的目的：

　　当用户进入页面的时候，显示loading 加载图标，等最大的图片加载以后再opacity 图片;

　　功能很简单，可是很蛋疼的是，我没彻底作出来；

　　在作的时候，第一时间我天然想到了以下的方法：

　　

$(function(){
    $('.banner img').load(function(){
        console.log('已经加载')    
    });
});

     熟话说的好呀，自信心太膨胀，到头来打击很大了；我觉得这样就能够了，而后看了一遍以后拿给老大，老大点了两下，说一直不加载出来了，loading 转转转的就是出不来，我说不该该呀，而后本身试一下，果然如此。

　　接着找了一下资料，发现上面说是缓存的缘由，由于load加载的时候有限浏览器会由于缓存不会触发load事件;没果；我就发了一个狠招：

　　

window.onload=function(){
    console.log('已经加载')
    
};

    嘿嘿，这样还不行，我顶你个肺了；而后自信心又彭脏了，拿给老大，老大说行，次日，客户来电说页面不加载，一个loading一直转转转的；我无语的回答他说:应该是大家那网速太慢了。。。你在等等，过了一下他答：说这样不行，虽然出来了，但等过久了；能不能让时间稍微少一点；

　　无奈，我就只能各类压缩图片呀，压完以后，他仍是以为不太理想；老大说这样能够了，如今项目还只是扔在空间上，这空间原本很慢，若是他网速慢，加载的时间天然也慢了。

　　老大说是这样说呀，任务仍是没完成啊，绞尽脑汁，偶然看到一个外国网站的轮播图jq 插件,我下下来看了一下源码，接着就诞生出了如下招数：

 　　

var oImg = $('.banner img:eq(0)');
    oImg.attr('src')+'?'+(new Date()).getTime();
    oImg.load(function(){
        console.log('已经加载')    
    });

　　通过测试很正常，这个意思就是，在进入页面的时候，把图片的地址加一个时间，这样每次加载的时候就不会有缓存;并且也只是加载一张图,一张加载完以后其余就无论；

通过改正，也没跟老大说就传了上去；此次我也不敢大意，就一直在测，这一测就测出不是问题的问题了；

　　由于页面加载的时候图片路径每次都会不一样，因此每次都会去加载，消耗的时间跟第一次加载等同；那不就是说进入一次就要加载一次吗？

　　我晕.........

　　通过数十次的尝试，苦逼的我，终于找到了一个完败上面全部方法的办法 了：

　　

function imgloading(){
    console.log('已经加载')
}

//页面调用
<img src="1.jpg" onload="imgloading();"/>

　　这样就能够解决掉图片缓存了，仍是会触发load事件；虽然我还不是具体理解这个；不过听别人说，这仍是由于页面加载的缘由；

　　众所周知网页是从上往下加载的；当加载到img的时候，我在ready里面获取img 元素实际上是取不到的；当页面继续往下加载，通过img以后，当前的img就表明加载完毕了，既然加载完毕，我想都加载了，介个load还有用吗？

　　而上述的方法不难看出，页面仔加载到img 的时候碰到了onload方法，它就知道了这个图片必需要加载以后才出现。

　　好了。。。不知道有没有同行遇到了本苦逼这样的事情，是否找到了比这个更加完美的解决方案。。若是你有更完美的办法，请必定要留言告知呀，万分感谢，我总感受仍是有更加好的方法的。。。