Is there a faster way to add icons next to urls/links in a web page - alternative to using “onload” event?

Question

I am writing a Firefox add-on that adds little icons next to all the urls in a web page.

The way I am doing it right now is :

1. window.addEventListener("load", AddIconsToURLs, false);
2. In AddIconsToURLs function: Get all elements by tag name "a" For each "a" element, append an "img" element.

However, for some web pages, the icons take a lot of time to appear since the "onload" event takes time.

Is there any faster way to make this happen ? Rather than waiting for all the links to load and then adding icons next to each of them, is there any way to add an icon next to a link as soon as that particular link is loaded ?

Any help is appreciated. Thanks.

Answer 1

What do you want to do with the images? Anything special? If it is just for the look, much easier would be to load a CSS style sheet in your addon and use the :after pseudo element:

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

No JavaScript processing involved :)

You can load a custom CSS file with:

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);
}

See also Using the Stylesheet Service .

Answer 2

您可以听另一个事件：

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