如果onload在N秒内没有触发,有没有办法设置img src？

Question

我正在使用以下javascript来生成动态HTML.

var imgHtml =
    "<img src='" + imgSrc + "'
     onload='fadeImg(this)'
     onerror='this.onerror = null; this.src='default.png' />"


function fadeImg(obj) {
    $(obj).fadeTo( 1000, $(obj).attr(.7) );
}

有时imgSrc是一个非常大的GIF动画的网址.如果imgSrc加载时间超过5秒,那么我想停止文件传输并显示default.png.

我怎么能这样做？有没有办法可以onload调用5000毫秒,如果没有,则默认为default.png？

编辑

var imgHtml =
    "<img src='" + imgSrc + "'
     data-opacity='{data-opacity}'
     class='thumbnail' 
     onload='fadeImg(this)'
     onerror='this.onerror = null; this.src='default.png' />"


function fadeImg(obj) {
    $(obj).fadeTo( 1000, $(obj).attr('data-opacity')/100 );
}

Answer 1

你可以使用一个计时器:

function loadImageShort(url, altUrl, timeout) {
    var img = new Image(), timer;

    img.onload = function() {
        clearTimeout(timer);
    };

    img.onerror = function() {
        clearTimeout(timer);
        img.onerror = null;
        img.src = altUrl;
    };

    timer = setTimeout(function() {
        if (!img.complete) {
            img.src = altUrl;
        }
    }, timeout);

    img.src = url;
    return img;
}


var img = loadImageShort("http://example.com/mainimg.jpg", "http://example.com/backupimg.jpg", 5000);

// now set other properties
img.className = "thumbnail";
img.setAttribute("data-opacity", "{data-opacity}");