通过Image 对象动态装载图片,不可能立即得到图片的问题

//JS缩略图正确的方法
var imgView = document.getElementById("imgview");

var imgObj = new Image();
imgObj.src = imgUrl;

function thumbImg(imgObj){
       if (typeof(imgObj) == 'object'){
             if ((imgObj.width != 0) && (imgObj.height != 0)){
                    var z = NewSize(imgObj.width, imgObj.height, imgW, imgH);   //调用压缩函数
                    imgView.setAttribute("src", imgObj.src);
                    imgView.style.width = z.w + "px"; 
                    imgView.style.height = z.h + "px";
             }else{
                   //setTimeout(thumbImg(imgObj), 100);   //这样会产生溢出,
                   setTimeout(' thumbImg (imgObj) ' ,  '100');  //这样好一点
             }
       }
};

需要注意的是,由于setTimeout函数是时间过程,所以执行的代码必须安排在函数thumbImg里面,而不能放在外面执行。
因此,凡是有 setTimeOut或 setInterval 的函数,其实现必须放在代码中,而不能放在外部,也不能返回一个值。
他是 void 类型,而不是 return 类型。


---------------------------
//预加载一组图片的正确方法
var arrImg = new Array();
... 循环载入图片名称...

var imgList = new Array();
var imgSize = new Array();
var iTimer = null;

 for(var i=0; i<arrImg.length; i++){
         var img = new Image();
         img.src =  arrImg[i];
         addImg(img);
         img = null;
 };

function addImg(imgObj){
     if(typeof(imgObj) == 'object'){
            if(imgObj.width !=0 && imgObj.height !=0){
                 imgList.Add(imgObj);
                 imgSize.Add(NewSize(imgObj.width, imgObj.height, imgW, imgH));
                 clearTimeout(iTimer); imgObj = null; iTimer = null;
            }else{
                 iTimer = setTimeout( 'thumbImg(imbObj)' ,  '100' );  //注意要加上引号
           }
     }
 };


这样才能确保图片被真正预加载了,直接给 image对象赋予src值,并不能马上加载,他有个延迟的问题。

你可能感兴趣的:(image)