Question

js等待图片加载完毕后再显示

假如有2张图片 1.jpg 2.jpg，loading图片：loading.jpg
代码如下
<img src='1.jpg' id='bigimg'/>
<a onclick='change(this)' res='1.jpg'>第一张</a>
<a onclick='change(this)' res='2.jpg'>第二张</a>
当我点击第二张的时候，我需要获取res属性的值，并把它赋给id是bigimg的img的src这个属性，那么浏览器应该就去请求张图片，这时，我需要实现的是：如果图片还没有下载下来，img就一直显示loading.jpg图片，如果下载下来，就直接显示下载的图片，请问change这个js函数如何写？

Answer 1

function change(obj){
    var img = new Image();
    var loadimg = new Image();
    var bigimg = getElementById("bigimg");
    loadimg.src = "loading.jpg";
    bigimg.innerHTML="";
    bigimg.style.width=String(loadimg.width)+"px";
    bigimg.appendChild(loadimg);
    if(img.complete) {
        bigimg.innerHTML="";
        bigimg.style.width=String(img.width)+"px";
        bigimg.appendChild(img);
        return;
    }
    img.onload = function(){
        bigimg.innerHTML="";
        bigimg.style.width=String(img.width)+"px";
        bigimg.appendChild(img);
    }
    img.src = obj.res;
}

试试~~