Run Javascript On Page Load

Transitions Only After Page Load

Worked pretty well. It would be nice to be able to prevent or trigger animations/transitions on page load without JavaScript, but alas.

Psst! Create a DigitalOcean account and get $200 in free credit for cloud-based hosting and services.

Comments

Nice 🙂 and just 10+ lines of code. Thanks a lot. BTW, you might need an AJAX loader to indicate the fact that page is loading. You can get it from http://preloaders.net

The other option is if you’re using typekit, which who isn’t these days? Then you can use the prexisting classes the it applies to the body, such as wf-loading or wf-active and some CSS to show a loading spinner when the page isn’t fully rendered, so you’re killing two birds with the same stone, both preventing FOUT and preserving animations. Of you want some examples checkout Dan Edens site for some awesome examples of both animations and gorgeous typefaces, plus he’s the creator of the incredibly amazing animate.css

I do not know exactly whether to put the CSS in the bottom of the page is valid or not. But I think we can put transition at the end of the page so that at least the effect of the transition can be initiated when the page is quite ready:

One note: Some browsers don’t understand none in the transition property. I’ve had to use transition:all 0s linear; (with prefixes) to make it go away completely.

Hi Chris, I am using the same effect to fade in the content on my site on page load, however instead of removing a class from body, I just add it (“.loaded”). This way, I can trigger such effects on various elements on the page. So, by default, we have:

You can see the effect here: http://betterhtml.com I think there is no difference between our approaches, since the final outcome is the same.

Hi Farzin, Good question. You can’t use transitions on the visibility, as it can’t be animated. It has just the 2 states: visible or hidden. That’s why you need to use the opacity.

Nice, I like that. I worked at a terribly over-thought solution for this in a project and it’s nice to see it can be handled much easier #bookmarked!

Why don’t you do the opposite? Meaning, have all the transitions in a separate CSS selection: Body.loaded .element < transition-1: xyz;>Then add the loaded class when the Dom is ready.

Possibly stating the obvious but this means that if you haven’t got js enabled you don’t get any fancy transitions. Maybe it would be worth adding the class to the body in js?

There is a typo with the very first word of the article. I think you meant “If you’ve…” not “I’ve you’ve…”

You should have added Narration too. I was confused initially about what is the issue.
Thanks for sharing even I’m facing similar issue 🙂

Another example of why we should never have started titting around animating things with CSS. Of course, people with a following who are incapable or unwilling to learn the pre-existing tools for doing so have managed to “trend” enough momentum behind this silly movement now that it’s a probably too late to reverse.

Chris, excellent post, I did notice the initial effect on the frog, clever, I am still excited about where CSS is headed, keep up the good work

I’m pretty green to CSS, but I have to say that between your blog and Treehouse my knowledge has grown 10 fold in a mere month.

You could so something like http://jsfiddle.net/PEEKt/ You can pass in an additional (fourth) argument to delay your desired effect. The only thing I would say to be wary of is images. If your app/site has images then the two second delay may not be enough. The effect will still run while the image is being downloaded. Or even users on slower connections. So ‘could’ be worth using this after the load event is fired. Just another way of doing it.

Hi
Excellent article as usual, but even It’s the article I needed in just this moment.
I have done a small css3 animation and It’s triggered before the complete page is loaded. I tried to add your jquery code, but I think I need a bit jquery for dummies (It’s the first time I add jquery code, sorry).
I added the jquery to head and class ‘preload’ to body tag: ” (…) $(“window”).load(function() $(“body”).removeClass(“preload”);
>); (…)” However the tag ‘preload’ is not removed.
I think I have done wrong the way to link jquery library or the way of calling jquery function, but I dont’ see it now. Any help? Many thanks.

Sorry, the coded I quoted maybe It’s removed by spam.
The jquery library I added is version 3.2.2 from googleaplis.

Источник

HTML onload Attribute

The onload attribute fires when an object has been loaded.

onload is most often used within the element to execute a script once a web page has completely loaded all content (including images, script files, CSS files, etc.). However, it can be used on other elements as well (see «Supported HTML tags» below).

For input elements, the onload attribute is only supported when

The onload attribute can be used to check the visitor’s browser type and browser version, and load the proper version of the web page based on the information.

Applies to

The onload attribute is part of the Event Attributes, and can be used on the following elements:

Examples

Body Example

Execute a JavaScript immediately after a page has been loaded:

Img Example

Using onload on an element. Alert «Image is loaded» immediately after an image has been loaded:

Input Example

Using onload on an element. Alert «Image is loaded» immediately after an image has been loaded:

Browser Support

The onload attribute has the following browser support for each element:

Element
body	Yes	Yes	Yes	Yes	Yes
iframe	Yes	Yes	Yes	Yes	Yes
img	Yes	Yes	Yes	Yes	Yes
input type=»image»	Yes	Yes	Yes	Yes	Yes
link	Yes	Yes	Yes	Yes	Yes
script	Yes	Yes	Yes	Yes	Yes
style	Yes	Yes	Yes	Yes	Yes

Источник

4 Ways To Run Javascript After Page Load (Simple Examples)

Welcome to a quick tutorial on how to run Javascript after page load. Having some trouble with missing elements, variables, or functions? Want to delay a piece of Javascript until everything else is fully loaded?

The common ways to run Javascript after page load are:

1. Add an event listener – document.addEventListener(«load», FUNCTION);
2. Add onload to the body tag –
3. Defer the script –
4. Lastly, place the script at the very bottom of the page – Although this is not quite “after page load”.

That covers the basics, but let us walk through some detailed examples in this guide. Read on!

TLDR – QUICK SLIDES

TABLE OF CONTENTS

EXECUTE ON PAGE LOAD

All right, let us now get into the ways and examples of how to run Javascript on page load.

1) EVENT LISTENER

Events should be pretty self-explanatory, even if you have never heard of them before. They are fired whenever something of interest happens – Mouse click, scroll, keypress, video play, and more. In this example, we listen to the load event on the window itself; Run a piece of Javascript when the window is fully loaded.

P.S. You can also target the DOMContentLoaded event. The difference is that load is fired when everything is fully loaded. But DomContentLoaded is triggered as soon as all the HTML elements are ready. I.E. Images, CSS, videos may not be fully loaded.

2) BODY ON LOAD

    // (A) JAVASCRIPT FUNCTION function demo ()    
 

Well, this kind of does the same thing as attaching addEventListener(«load», FUNCTION) . When the HTML document is loaded, onload=»demo()» will be triggered.

3) DEFER SCRIPT LOAD

document.getElementById("myTxt").style.color = "blue";

Yes, just add defer to the tag, and it will hold until the entire page is done. For those who are confused about the difference between defer and onload :

• defer will basically load the Javascript only when the HTML page is done.
• onload does not mess with the loading order of the script, it simply runs the specified function when the page is ready.

P.S. Please take note that defer will not work with inline Javascript. I.E. Must load an external Javascript file.

4) SCRIPT AT BOTTOM (NOT QUITE AFTER PAGE LOAD)

Lastly, just put the scripts at the bottom of the page. This is not quite “after page load”, but it is… After everything else is nearly loaded.

DOWNLOAD & NOTES

Here is the download link to the example code, so you don’t have to copy-paste everything.

SUPPORT

600+ free tutorials & projects on Code Boxx and still growing. I insist on not turning Code Boxx into a «paid scripts and courses» business, so every little bit of support helps.

EXAMPLE CODE DOWNLOAD

Click here for the source code on GitHub gist, just click on “download zip” or do a git clone. I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

EXTRA BITS & LINKS

That’s all for this guide, and here is a small section on some extras and links that may be useful to you.

WHICH IS THE BEST METHOD?

Personally, I will usually use window.addEventListener(«DOMContentLoaded», FUNCTION) or defer loading non-critical scripts. But whichever makes the most sense for your own project is the best method.

LINKS & REFERENCES

INFOGRAPHIC CHEAT SHEET

THE END

Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!

Источник

4 Ways To Run Javascript After Page Load (Simple Examples)

Welcome to a quick tutorial on how to run Javascript after page load. Having some trouble with missing elements, variables, or functions? Want to delay a piece of Javascript until everything else is fully loaded?

The common ways to run Javascript after page load are:

1. Add an event listener – document.addEventListener(«load», FUNCTION);
2. Add onload to the body tag –
3. Defer the script –
4. Lastly, place the script at the very bottom of the page – Although this is not quite “after page load”.

That covers the basics, but let us walk through some detailed examples in this guide. Read on!

TLDR – QUICK SLIDES

TABLE OF CONTENTS

EXECUTE ON PAGE LOAD

All right, let us now get into the ways and examples of how to run Javascript on page load.

1) EVENT LISTENER

Events should be pretty self-explanatory, even if you have never heard of them before. They are fired whenever something of interest happens – Mouse click, scroll, keypress, video play, and more. In this example, we listen to the load event on the window itself; Run a piece of Javascript when the window is fully loaded.

P.S. You can also target the DOMContentLoaded event. The difference is that load is fired when everything is fully loaded. But DomContentLoaded is triggered as soon as all the HTML elements are ready. I.E. Images, CSS, videos may not be fully loaded.

2) BODY ON LOAD

    // (A) JAVASCRIPT FUNCTION function demo ()    
 

Well, this kind of does the same thing as attaching addEventListener(«load», FUNCTION) . When the HTML document is loaded, onload=»demo()» will be triggered.

3) DEFER SCRIPT LOAD

document.getElementById("myTxt").style.color = "blue";

Yes, just add defer to the tag, and it will hold until the entire page is done. For those who are confused about the difference between defer and onload :

Источник