Question

我不明白为什么这个功能不起作用。我希望使用单个onload函数在HTML中声明图像，该函数会自动处理图像的源和mouseover/out函数。

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*}
}

现在，即使是警报弹出也没有，我也不知道为什么。我尝试在<head>中添加脚本，并在src中将src=""设置为无<img>。我使用的是Firefox，但它在Edge中也不起作用。

问题是：如何在图像元素上触发onload函数？

此外，如果您对自己实现自动加载某些图像（实际上是按钮/链接）的行为有任何想法，请随意分享。我是JS的新手，但不是编程。

正如您所看到的，所有图片都在"images/def/..."中，鼠标悬停在img上的所有图片都在"images/mo/..."。

Answer 1

我总是尝试让浏览器进行图片替换，但是如果你必须使用脚本，那么你可以在DOM ready或window load事件上执行类似的操作：

DatabaseChangeLog

$('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);
    });
});

同样在JSFiddle。

onload无法在<img/>元素

1 个答案: