How to execute javascript before document fully loads but after element is there?

Question

I'm trying to write a very simple user content script for google.com, but the problem is that google's source code is lengthy. I want to execute code in javascript the instant that an element is in the document, but before the whole document has loaded.

Essentially, I wan't to change the source of an image before the rest of the page loads. I also want to modify html in a certain other div with a specific id. But again, I don't want to wait for the rest of the document to load before I start doing it.

How can I accomplish this? I am using jquery.

check http://stackoverflow.com/questions/4057236/how-to-add-onload-event-to-a-div — juvian, Mar 27 '14 at 20:44
Are you able to put this script directly underneath the element? Or are you only able to put the script in a fixed location (like ) and need to detect when the element is available? — Evan Kennedy, Mar 27 '14 at 20:46
Could it a be a XY problem? http://meta.stackexchange.com/questions/66377/what-is-the-xy-problem — A. Wolff, Mar 27 '14 at 20:52
@A.Wolff I don't think so because content scripts are scripts. I have to use javascript. — jackcogdill, Mar 27 '14 at 20:53
@yentup I didn't spot it, it is for an user script, so ya, my bad! — A. Wolff, Mar 27 '14 at 20:55
You can poll the DOM at frequent intervals until you find the desired div — levi, Mar 27 '14 at 20:56
I think I found what I'm looking for. This answer seems perfect: http://stackoverflow.com/a/5114084/1313757 — jackcogdill, Mar 27 '14 at 20:57

score -1 · Answer 1 · answered Sep 13 '14 at 10:25

-1

Try this:

var element = $([TagName]) || document.getElementsByTagName([TagName])[[occurance]];

function doSomething() {
  // Do some magic.
}

element.addEventListener("load", doSomething, false); // Notice no brackets after the function call.

This adds an event listener to the element, and will wait until it has fully loaded until it runs the function (doSomething()).

Hope this helps.

answered Sep 13 '14 at 10:25

gilbert-v

1,263
1
11
23

The element doesn't exist at the time the code executes. – Xan Sep 13 '14 at 10:40

How to execute javascript before document fully loads but after element is there?

1 Answers1