/    Sign up×
Community /Pin to ProfileBookmark

Problems with alternate to DOM ready?

Greetings—-

The problem with window.onload before starting scripts is that things like the loading of images must complete before the script executes. Many frameworks have essentially a execute when DOM is loaded option. Here is the problem:

(1) No frameworks such as jQuery allowed
(2) **SIGH** –no javascript allowed within the BODY tag (please don’t lecture me on how stupid this is, I already know. The HTML is GOLDEN, it must not be changed)
(3) Because of the heavy, heavy use of eye candy images, the total page may take a long time to load, but the functionality of the javascript must exist even before the images have downloaded if there is a problem with download speed.

So here is the thing. I do have other options, but this is something that might serve just as well. I am somewhat leery of it because it seems too good to be true, and might not be browser/old browser compatible. Here it is:

[CODE]
//in the HEAD section
function replacementForDomReady(){
// all sorts of stuff that depend on the DOM being fully loaded
};

setTimeout(replacementForDomReady);[/CODE]

And yes, there is no second arg given for setTimeout. For what I’m doing its not needed.

The question is— what flaws, if any, arise from using this approach? It seems to work. Does anybody know where it doesn’t, or if there can be bad consequences for using such an approach?

to post a comment
JavaScript

2 Comments(s)

Copy linkTweet thisAlerts:
@deathshadowSep 03.2014 — Settimeout would be hard since you don't know how long the page load would take, and that timer would start counting down the moment script execution ends.

Is there some reason you can't simply append a DOMContentLoaded event with an ONLOAD fallback for browsers that don't know it?

document.addEventListener("DOMContentLoaded", function(e) {
// stuff that needs the DOM loaded
}


You use addEventListener (and/or attachEvent, for the latter I'd set onload since IE is a re-re) it shouldn't interfere with any other scripting.

https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

Though really I'd love to hear just exactly how badly you're sheepdipped that you can add scripting to HEAD but not BODY. That's one of those situations where I'd probably spew obsenities at the top of my lungs, give whoever told me I couldn't do it a matching pair of fingers (one for them, one for the horse they rode in on), and walk away from the project.

... but then there's a reason I don't work well with others. ZERO tolerance for stupidity and the type of ass-kissers who usually end up in charge of projects while being completely unqualified to be in charge of a blasted thing.

Though what you are saying about images and sizes makes it sound like whatever this is shouldn't even be a website in the first place.
Copy linkTweet thisAlerts:
@TcobbauthorSep 04.2014 — Thanks for the reply Deathshadow--

The original idea came from something I saw on the internet sometime back to the effect that using setTimeout as I described would have the same effect as a "DOM ready" due to the way browsers process initial page loads. I thought that was interesting and I mentally filed it away with some suspicions as to its validity, hence the post.

As it turns out it actually does work on small pages, but it doesn't if the DOM is broken up into several "chunks" of data. So no, as it turns out its not a viable procedure. But I do have workable alternatives for the problem they're just somewhat kludgier than I like.
×

Success!

Help @Tcobb spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...