Question

I’ve been trying to set css3 animation to load after the entire page load using jquery according to this but to no avail. Anyone knows any other way or maybe there’s something i overlooked? thanks.

This is my code:

<script src="scripts/jquery-1.8.0.js" type="text/javascript"></script>

<img id="anim" src="image/some image.png" alt="image"/>
<script type="text/javascript" charset="UTF-8">
    $("window").load(function() {
        $("#anim").addClass("animation");
    });
</script>

class animation is where i put my css3 animation. Note that when i include the class directly to the image the animation is running fine.

Answer 1

Try to surround your code with:

$(document).ready(function() {
 //Your code here
})

.ready(handler) specify a function to execute when the DOM is fully loaded.

and handler is function to execute after the DOM is ready.

While JavaScript provides the load event for executing code when a page is rendered, this event does not get triggered until all assets such as images have been completely received. In most cases, the script can be run as soon as the DOM hierarchy has been fully constructed. The handler passed to .ready() is guaranteed to be executed after the DOM is ready, so this is usually the best place to attach all other event handlers and run other jQuery code. When using scripts that rely on the value of CSS style properties, it’s important to reference external stylesheets or embed style elements before referencing the scripts.

See more here