首先先明确一下我要的目的：
当用户进入页面的时候，显示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方法，它就知道了这个图片必须要加载之后才出现。
好了。。。不知道有没有同行遇到了本苦逼这样的事情，是否找到了比这个更加完美的解决方案。。如果你有更完美的办法，请一定要留言告知呀，万分感谢，我总感觉还是有更加好的方法的。。。
您可能感兴趣的文章:
- JS实现图片预加载无需等待
- JS判断图片是否加载完成方法汇总(最新版)
- javascript实现图片延迟加载方法汇总(三种方法)
- js实现图片在未加载完成前显示加载中字样
- JavaScript判断图片是否已经加载完毕的方法汇总
- 解决js图片加载时出现404的问题
- js或者jquery判断图片是否加载完成实现代码
- Jquery图片延迟加载插件jquery.lazyload.js的使用方法
- js图片延迟加载的实现方法及思路
- 基于jquery的图片懒加载js
- js针对图片加载失败的处理方法分析
