javascript - 立即获取 addEventListener

Question

我有以下 Javascript 代码来用 png 替换 svg 生成的图像我需要它立即发射而不是“加载”。我尝试将其设置为悬停，即使没有加载原始图像它也会继续 - 几乎完全按照我的意愿，除了我希望即使没有悬停也会发生这种情况。如何设置立即生效的事件？

var svg = document.getElementById('logo-header');

var src; // undefined

if (svg) {
    svg.addEventListener('load', function(event){    
        var img = document.createElement("img");
        img.setAttribute("logo-header", "im");
        img.src = src || "/wp-content/uploads/2020/04/GSAlogo4.png";

        this.parentNode.replaceChild(img, this);
    }, false);
}

Answer 1

如果你要做这样的事情。

var svg = document.getElementById('logo-header');

var src; // undefined

if (svg) {
    (function(){    
        var img = document.createElement("img");
        img.setAttribute("logo-header", "im");
        img.src = src || "/wp-content/uploads/2020/04/GSAlogo4.png";

        this.parentNode.replaceChild(img, this);
    })();
}

使其成为一个自动执行的匿名函数。

但是您也可以将其从函数中取出，这也应该有效

var svg = document.getElementById('logo-header');

var src; // undefined

if (svg) {
    var img = document.createElement("img");
    img.setAttribute("logo-header", "im");
    img.src = src || "/wp-content/uploads/2020/04/GSAlogo4.png";

    this.parentNode.replaceChild(img, this);
}