的javascript：的onload和onerror的召集

我是新來的JavaScript，因此迷糊變量範圍... 我試圖加載圖像，並與另一個URL替換它，當它不存在。我必須在純JavaScript中做到這一點。的javascript：的onload和onerror的召集

在這裏我得到了2個版本非常相似，但它們的性能差異。唯一相同的是：他們不工作。第三個版本需要刷新並且不能在IE下工作。 d是具有number屬性的對象，這沒有問題。

以下是他們的共同點

.attr("xlink:href", function (d) { 
    var img = new Image();

在這裏，第1版：無論onload和onerror被調用。但是，d收到src，不幸的是它始終是generic.jpg。

function onLoadHandler() { 
    d.src = "http://.../peopleimages/" + d.num + ".jpg"; 
    alert(d.name + " onload called"); 
    } 
    function onErrorHandler() { 
    d.src = "http://.../images/generic.jpg"; 
    alert(d.name + " onerror called"); 
    } 
    img.onload = onLoadHandler(); 
    img.onerror = onErrorHandler(); 
    img.src = "http://.../peopleimages/" + d.num + ".jpg"; 
    return d.src; 
    }

這裏的版本2：根據圖像的存在，onload或onerror被調用。但是警報時d.src的值是未定義的。

img.onload = function() { 
    alert(d.name + " : loaded"); 
    d.src = "http://.../peopleimages/" + d.num + ".jpg"; 
    } 
    img.onerror = function() { 
    alert(d.name + " : failed"); 
    d.src = "http://.../images/generic.jpg"; 
    } 

    img.src = "http://.../peopleimages/" + d.num + ".jpg"; 
    alert(d.src);//undefined 
    return d.src; 
    }

這裏的版本3：它的工作原理，但不是第一次。我必須刷新以正確地獲取圖像。也許它在圖像完全加載之前返回。

img.src = "http://.../peopleimages/" + d.num + ".jpg"; 
    return img.complete ? "http://.../peopleimages/" + d.num + ".jpg" : "http://.../images/generic.jpg"; 
    }

來源

2012-09-20 wceo

您正在調用函數，而不是分配！

img.onload = onLoadHandler(); 
img.onerror = onErrorHandler();

必須

img.onload = onLoadHandler; 
img.onerror = onErrorHandler;

來源

2012-09-20 12:29:37 epascarello

THX非常感謝！我正在粗心大意。現在有更改函數內的d.src的問題.. – wceo

爲什麼不在內部使用'this'？ – epascarello

對不起，但我不太確定。應該是這個[d.src]？它不起作用。 – wceo

與你的第二個例子的問題是，當加載圖像，你的其他代碼進行了評估後的圖像回調被解僱。我真的不確定你的代碼完成了什麼，但嘗試這樣。

img.onload = function() { 
    alert(d.name + " : loaded"); 
    d.src = "http://.../peopleimages/" + d.num + ".jpg"; 
    return doSomething(this, d); 
    } 
    img.onerror = function() { 
    alert(d.name + " : failed"); 
    d.src = "http://.../images/generic.jpg"; 
    return doSomething(this, d); 
    } 

    function doSomething(img, d) { 
    img.src = "http://.../peopleimages/" + d.num + ".jpg"; 
    alert(d.src); 
    return d.src; 
    };

來源

2017-09-19 09:57:31

的javascript：的onload和onerror的召集

回答

相關問題