Javascript 如果onload在N秒内未启动，是否有方法设置img src？

我使用以下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) );
}

---

您只需使用计时器即可：

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}");

---

您只需使用计时器即可：

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}");

---

您可以使用

setTimeout（）

并在图像加载时清除它

var timer = setTimeout(function(){
   $('$imageId').attr('src', '/path/to/default');
},5000);

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

---

您可以使用

setTimeout（）

并在图像加载时清除它

var timer = setTimeout(function(){
   $('$imageId').attr('src', '/path/to/default');
},5000);

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

---

使用超时设置标志，检查图片是否已加载，如果未加载，则设置新标志：

var img=document.getElementById（'image'），
isAborted=false，
isLoaded=false，
waitForAbort=5000；//毫秒
//当图像加载完毕时，触发此命令
var onloadHandler=函数（）{
如果（！Isborted）{
isLoaded=true；
log（'I finshed load'）；
}
};
//设置onload处理程序并开始加载映像
img.onload=onloadHandler；
img.src=http://i.imgur.com/oWkTtiQ.gif';
//设置超时，将图片更改为占位符
setTimeout（函数（）{
如果（！已加载）{
isAborted=真；
img.src=http://placehold.it/100x100.png“；//占位符
}
}，waitForAbort）
使用超时设置标志，检查图片是否已加载，如果未加载，则设置新标志：


var img=document.getElementById（'image'），
isAborted=false，
isLoaded=false，
waitForAbort=5000；//毫秒
//当图像加载完毕时，触发此命令
var onloadHandler=函数（）{
如果（！Isborted）{
isLoaded=true；
log（'I finshed load'）；
}
};
//设置onload处理程序并开始加载映像
img.onload=onloadHandler；
img.src=http://i.imgur.com/oWkTtiQ.gif';
//设置超时，将图片更改为占位符
setTimeout（函数（）{
如果（！已加载）{
isAborted=真；
img.src=http://placehold.it/100x100.png“；//占位符
}
}，waitForAbort）
为什么要使用javascript将javascript推入HTML？只需使用javascript构建元素并添加事件处理程序。为什么要使用javascript将javascript推送到HTML中？只需使用javascript构建元素并添加事件处理程序。我喜欢纯JS解决方案比jQuery更容易阅读。@AustinMullins-是的，我最讨厌的是：
$（this）.attr（“src”，url）
当您可以只做
this.src=url
@jfriend00一旦我有了图像对象，如何将其模板化为html到变量
imgHtml
？我刚刚编辑了我的原始问题，将自定义属性和类名作为img的一部分element@user784637-您可以在图像对象上设置其他属性。我在回答中已经说明了一些问题。你可以在函数完成后再做这些，也可以将它们集成到函数中，如果你每次都这样做的话。我喜欢纯JS解决方案比jQuery更容易阅读。@AustinMullins-是的，我最讨厌的是：
$（this.attr（“src”，url）
当您可以只做
this.src=url
@jfriend00一旦我有了图像对象，如何将其模板化为html到变量
imgHtml
？我刚刚编辑了我的原始问题，将自定义属性和类名作为img的一部分element@user784637-您可以在图像对象上设置其他属性。我在回答中已经说明了一些问题。您可以在函数之后执行这些操作，也可以将它们集成到函数中（如果您每次都执行相同的操作）。