js兼容实现图片的预加载

来源：互联网发布：互力微信淘客软件编辑：程序博客网时间：2024/05/01 11:13

pre{ font-family: courier new!important; font-size: 12px!important; word-wrap: break-word; white-space: pre-wrap; background-color: rgb(245, 245, 245); font-family: courier new!important; font-size: 12px!important; border: 1px solid rgb(204, 204, 204); padding: 5px; overflow: auto; margin: 5px 0; color: rgb(0, 0, 0);图片预加载原理：

function addImage(mSrc){ 
   var aimg  = new Image();
   aimg.onload = function(){  //  
 document.body.appendChild(aimg); 
  }
   aimg.src = mSrc;  //有顺序，写在后面才会兼容所有的浏览器
}

页面一上来，图片先不会加载，当用户进行主动触发的时候才会开始加载图片。

真实项目中使用的图片预加载代码部分展示：

 /**
   image preloading
 **/
 function SImage(callback)
  {
    var img = new Image();
    this.img = img;
    var appname = navigator.appName.toLowerCase();
    if (appname.indexOf("netscape") == -1)
    {
       //ie
        img.onreadystatechange = function () {
            if (img.readyState == "complete")
            {
                callback(img);
            }
        };
    } else {
       //firefox
        img.onload = function () {
            if (img.complete == true)
            {
                callback(img);
            }
        }
    }
  }
SImage.prototype.get = function (url)
 {
    this.img.src = url;
 }
// 调用部分：
  var img = new SImage( recallFn );
      img.get(o.ImageSrc); 
      function recallFn( obj ){  
         var w = obj.width;
         var h = obj.height; 
          ....
       }

0 0