perform Jquery function after page content loads completely

Question

i have a script that i want to be performed after the whole page has loaded completely not while page is loading. I need you help. below is the script.

jQuery(function () {
var $els = $('div[id^=quote]'),
    i = 0,
    len = $els.length;

$els.slice(1).hide();
setInterval(function () {
    $els.eq(i).fadeOut(function () {
        i = (i + 1) % len
        $els.eq(i).fadeIn(750);
    })
}, 3750)
})

Answer 1

Try:

$(window).on("load", function () {
   // your code here
});

See explanation here : jQuery - What are differences between $(document).ready and $(window).load?

Answer 2

Use $( document ).ready();

This should work for you:

$( document ).ready(function () {
var $els = $('div[id^=quote]'),
    i = 0,
    len = $els.length;

$els.slice(1).hide();
setInterval(function () {
    $els.eq(i).fadeOut(function () {
        i = (i + 1) % len
        $els.eq(i).fadeIn(750);
    })
}, 3750)
});

Answer 3

Your code appears to be correct, your just using a different namespace for jQuery / alias...

$(function() {
  // DOM Ready Event..
  // Your already doing this
});

What is DOM Ready?? well basically it waits for all the elements on your page to be created/ready.. This does not include certain things like images loading or other events.. In general, It means that you should be able to access any element at this point.

If you can provide a jsFiddle of your code or explain further what the actual issue is as such then we can help. But my guess is that your actually looking more for an event against certain elements..

Otherwise use as @NenadP suggested, this should load after the DOM ready even and generally will cover most things.. But just keep in mind if you have certain elements or frameworks/libraries.. You might need to look at their events/callbacks.