Prefetching content of a link

I am developing a firefox plugin. I want to show a tooltip which contains the preview of the target page when user mouseover a link.

This is simple, But there is a time requirement. This process should get completed before 1 sec(Af开发者_如何学JAVAter user mouseover the link.)

Any Ideas on where to start?

You should create an add-on that scans the content document DOM for anchor tags after the page has loaded (i.e. when the DOMContentLoaded event is received). The old-style way to do this is to use a XUL overlay. Presumably the same thing can be done with the Addon SDK using a content script.

You'd then have to load each link into a hidden iframe (e.g. set the height to zero) and create a screenshot as described here: https://developer.mozilla.org/en/drawing_graphics_with_canvas#Rendering_Web_Content_Into_A_Canvas. Note that the Mozilla Developer site is malfunctioning right now so code samples aren't showing up correctly (at least on the mirror that I am being served). I assume that will be fixed quickly since it's such a serious problem.

As Wladimir says, loading every linked page and making a screenshot will potentially take quite a long time, so if the user mouses over a link before then I would a) display throbber and "Loading..." text instead of the screenshot and b) prioritize the loading of that link so that the screenshot appears as quickly as possible.

With Firefox it's very simple. Just use the following element and the browser will preload your contents. Contents are preloaded in background, once the whole current page is loaded.

<link rel="prefetch" href="/images/nextimage.jpg" />

For more info, refer this page