有没有一种更快的方法来在网页的URL /链接旁边添加图标-替代使用“ onload”事件？

Question

我正在写一个Firefox附加组件，它在网页中的所有URL旁边添加了一些小图标。

我现在做的方式是：

1. window.addEventListener（“ load”，AddIconsToURLs，false）;
2. 在AddIconsToURLs函数中：通过标记名称“ a”获取所有元素对于每个“ a”元素，请附加一个“ img”元素。

但是，对于某些网页，由于“ onload”事件需要花费时间，因此图标需要花费很多时间才能显示。

有没有更快的方法可以做到这一点？ 除了等待所有链接加载然后在每个链接旁边添加图标外，是否有任何方法在加载特定链接后立即在链接旁边添加图标？

任何帮助表示赞赏。 谢谢。

Answer 1

您要如何处理图像？ 有什么特别的吗？ 如果仅是外观，将更容易在您的插件中加载CSS样式表并使用:after伪元素：

a:after {
  content: url('chrome://youraddon/skin/imagefile.png');
}

不涉及JavaScript处理:)

您可以使用以下方式加载自定义CSS文件：

var sss = Components.classes["@mozilla.org/content/style-sheet-service;1"]
          .getService(Components.interfaces.nsIStyleSheetService);
var ios = Components.classes["@mozilla.org/network/io-service;1"]
          .getService(Components.interfaces.nsIIOService);
var uri = ios.newURI("chrome://youraddon/skin/cssfile.css", null, null);

if(!sss.sheetRegistered(uri, sss.AGENT_SHEET)) {
    sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
}

另请参阅使用样式表服务 。

Answer 2

您可以听另一个事件：

document.addEventListener("DOMContentLoaded", AddIconsToURLs, false);