JavaScript中预加载图片及callback回调方法的使用。

转载出处: http://blog.csdn.net/numb1126/article/details/2998929


  1. <head>
  2. <script type="text/javascript">
  3. function loadImage(url, callback) {
  4.     var img = new Image(); //创建一个Image对象，实现图片的预下载
  5.     img.src = url;
  6.     
  7.     if (img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数
  8.         callback.call(img); 
  9.         return; // 直接返回，不用再处理onload事件
  10.     }

  12.     img.onload = function () { //图片下载完毕时异步调用callback函数。
  13.         callback.call(img);//将回调函数的this替换为Image对象
  14.     };
  15. };
  16. //被回调的方法
  17. function imgLoaded(){
  18. alert(this.width);
  19. }
  20. </script>
  21. </head>
  22. <body>
  23. <input type="button" value="loadImage" οnclick="loadImag('xxx.jpg',imgLoaded)"/>
  24. </body>

 

这是一个完整的示例，不知道原作者是谁了- -！

我只负责解释一下，img.complete方法表示图片是否加载完成，如果已经被浏览器缓存，则返回true。而onload方法表示第1次加载此图片，浏览器之前没有缓存过，一般来说，第1次访问此网页，那么会触发onload事件，而以后就是触发conplete事件了。方法执行到img.onload或complete这行时，将暂停往下执行，等待图片加载，一但完成，则执行function(){}里的代码。直接写个callback，则表示执行οnclick="loadImag('xxx.jpg',imgLoaded)执行中第2个参数传过来的方法。而这个方法里用了this.width，那么这个this表示的本是function loadImage这个函数，并没有width属性，所以用callback.call(AAA)来将this替换为括号内的AAA。