onload not working in <img> element

我不明白爲什麼這個函數不會觸發。我想用一個單獨的onload函數聲明HTML格式的圖像，該函數將自動處理圖像的源代碼和mouseover/out函數。onload not working in <img> element

的HTML看起來像這樣：

<img id="menuBtnNovo" onload="imgButton(this)"/>

和JS功能imgButton看起來是這樣的：

function imgButton(e){ 
    window.alert("asdasdad"); 
    e.src="images/def/" + e.Id + ".png"; 
    e.onmouseover= function(){ *change image here*} 
    e.onmouseout= function(){ *change image back here*} 
}

現在，甚至沒有警告彈出，我不知道爲什麼。我試圖在<img>中將腳本放入<head>並將src設置爲無src=""。我正在使用Firefox，但它在Edge中也不起作用。

問題是：如何在圖像元素上激發onload函數？另外，如果您對自己實現自動加載某些圖像（實際上是按鈕/鏈接）的行爲有任何想法，請隨時分享。我是JS新手，但不是編程。

如您所見，所有圖像都在"images/def/..."中，當鼠標位於img的所有圖像都在"images/mo/..."時。

來源

2016-09-05 Monset

+10

當圖像被加載時，onload被觸發，爲此你需要src屬性和有效圖像。 – jcubic

所以也許如果我做了相同的，但與div和背景圖像屬性？ – Monset

div不支持onload事件，所以不支持。 – dman2306

我總是儘量讓瀏覽器做形象替代，但如果你必須使用腳本，比你可以做這樣的事情上DOM ready，或window load事件：

$('img[data-regular]').each(function(i) { 
 
    var thisImage = $(this); 
 
    var regular = thisImage.data('regular'); 
 
    var hover = thisImage.data('hover'); 
 
    thisImage.attr('src', regular); 
 
    /* Preload image for hover */ 
 
    $('<img/>')[0].src = hover; 
 
    /* Set events */ 
 
    thisImage.on('mouseenter', function(e) { 
 
     thisImage.attr('src', hover); 
 
    }).on('mouseleave', function(e) { 
 
     thisImage.attr('src', regular); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img data-regular="https://placehold.it/350x150" data-hover="https://placehold.it/450x200" />

而且在JSFiddle。

來源

2016-09-05 16:08:01 skobaljic

你可能想提到這是jQuery而不是純Javascript。（好吧，_uses_ jQuery--這在常規javascript中很容易，它讓我想知道爲什麼人們仍然涌向jQuery） – somethinghere

簡潔而簡單。謝謝：D我不得不多看看JQ，但這太棒了！謝謝！ – Monset

@somethinghere，我很高興你足夠年輕，不知道13年前如何處理醜陋的瀏覽器。 jQuery在2006年進行了一場革命，許多沮喪的開發人員感到如此寬慰。 Firebug剛剛發佈，並改變了我們的生活。如果我可以做一些簡單的事情，爲什麼我會努力做得更努力？最後，這是一個選擇的問題，有些人仍然喜歡輸入控制檯......但不是，不是我，不是在21世紀。 – skobaljic

onload not working in <img> element

回答

相關問題