CODEWITHSUNDEEP
javascripthtmlprerender
Alex P. Miller
Alex P. Miller

Reputation: 2246

rel="prerender" load event? Notify users when prerender finishes

On page A, I dynamically insert a prerender tag pointing to page B: <link rel="prerender" href="page B"/>.

I want to know if prerender fires an event when it is done loading page B which I can access from the javascript on page A.

If browsers don't have any support for this, is there any other workaround?

Upvotes: 0

Views: 317

Answers (2)

Luis Roberto
Luis Roberto

Reputation: 472

Unfortunately the load and error events are not fired with the rel="prerender", the same in Chrome/Firefox (I don't know why).

Instead of that I use rel="preload" and everything is working fine (but just for Chrome)

Additionally you can to add the type of asset with as parameter

<link rel="preload" as="document" href="some.html">

My Typescript Method to create a link to download is the next:

private createLinkToPreload(externalHref: string): HTMLElement {
  let linkElement = document.createElement("link");
  linkElement.rel = "preload";
  linkElement.href = externalHref;

  let me = this;
  linkElement.onload = () => {me.onElementPreloaded(externalHref)};
  linkElement.onerror = () => {me.onElementPreloadError(externalHref)};

  return linkElement;
}

private onElementPreloaded(externalHref: string) {
  console.log(`${externalHref} preloaded`);
}

private onElementPreloadError(externalHref: string) {
  console.log(`Error while preloading ${externalHref}`);
}

Upvotes: 1

Naman Nehra
Naman Nehra

Reputation: 592

link tag fires a load event when it's done loading.

link.addEventListener('load', func(e));

or

link.onload = func;

For maximum browser support, don't use link. Just get the file using AJAX.

Upvotes: 0

Related Questions