Running JavaScript after page has been loaded

Question

I currently have a JavaScript file that I call in my view page in which I get my data information to display. At the same time I have this piece of JavaScript that shows a menu bar once the image has been clicked. This scripted is being ran before the page is loaded completely or something because it is not working. How can I make a piece of my JavaScript take action after all other scripts have completed running and page is loaded? this is what I tried but not working right

JavaScript

(function ($) {

.... lines to load view page with data

$(document).ready(function () {
    $('figure').on('click', function (event) {
        $(event.currentTarget).toggleClass('open');
    });
});

})(jQuery);

@mplungjan - `$` is passed in as a variable, but `$()` is never issued. — Travis J, Apr 05 '13 at 18:00
@mplungjan The outer expression is an IIFE, the inner is `$(document).ready` — Ian, Apr 05 '13 at 18:03
@ian I saw that (didn't know the acronym) but ignored it since it looks more like some method to protect jquery than what is needed. We will see what OP actually needs — mplungjan, Apr 05 '13 at 18:04
@mplungjan http://benalman.com/news/2010/11/immediately-invoked-function-expression/ , http://stackoverflow.com/questions/8228281/what-is-this-construct-in-javascript — Ian, Apr 05 '13 at 18:04

dsgriffin · Accepted Answer · 2013-04-05T18:12:08.673

8

You could use $(window).on("load") instead of $(document).ready if you want to wait until all the elements have loaded in that case:

$(window).on("load", function(){
    $('figure').on('click', function (event) {
        $(event.currentTarget).toggleClass('open');
    });    
});

edited Apr 05 '13 at 18:12

answered Apr 05 '13 at 17:59

dsgriffin

66,495
17
137
137

1

I have found that the load event for window is more appropriate than document.ready in certain cases as well. – Travis J Apr 05 '13 at 18:01
I have never needed anything but $(function() {}); so far – mplungjan Apr 05 '13 at 18:02
3

@mplungjan - The situations I have needed to use the load version on window instead of document has been when images are still loading in parallax sites or when images are being rendered as the ready event fires. I have found that at times the dimensions can be slightly off when using ready in those situations. – Travis J Apr 05 '13 at 18:04
2

This worked like a charm just waiting till i could mark it as answered. – Masriyah Apr 05 '13 at 18:05
I don't see how this is getting upvotes. `.load()` is deprecated in 1.8... – Jeff Shaver Apr 05 '13 at 18:06
@jeffshaver it worked on my webapp when i made this change – Masriyah Apr 05 '13 at 18:07
@Amina I understand that. But why use deprecated code? It is never good to suggest using deprecated code – Jeff Shaver Apr 05 '13 at 18:07
And my suggestion didn't ? – mplungjan Apr 05 '13 at 18:07
1

@JeffShaver - What replaced `load`? In these situations I usually just use `window.onload = function(){}` instead of jquery. – Travis J Apr 05 '13 at 18:08
@jeffshaver what are the downfalls of using this method? before i posted my question here i wrote it how mplungjan suggested but it wasn't working that way. – Masriyah Apr 05 '13 at 18:09
1

@mplungjan You used document ready, which is what the OP already had. This is window load. It's not the same. – JJJ Apr 05 '13 at 18:09
2

There's a difference between `.load()` being deprecated and the `"load"` event. Just use `.on("load", function () {});` instead then. There's a major difference between `$(window).on("load", function () {});` and `$(document).ready(function () {});` – Ian Apr 05 '13 at 18:11
@Amina the downfalls of using deprecated code is that if they actually `remove` it in jQuery 2.0 (or whatever the next version is) your code will break. – Jeff Shaver Apr 05 '13 at 18:11
@Ian then suggest good code? `.load()` IS deprecated now. So if you want to suggest `.on('load'` I would upvote – Jeff Shaver Apr 05 '13 at 18:12
1

@JeffShaver Updated. Sorry about that Amina I didn't mean to suggest using deprecated methods – dsgriffin Apr 05 '13 at 18:12
1

Where does it say load is deprecated out of curiosity? It doesn't say it here: http://api.jquery.com/load/ – Travis J Apr 05 '13 at 18:12
1

@JeffShaver I wasn't trying to defend them. I'm just saying, instead of downvoting for using `.load()`, it would probably be more useful to just suggest using `.on("load"`. And it's easier if this answer is just updated, as it already has been :) – Ian Apr 05 '13 at 18:13
@TravisJ look at the tags on the right side http://api.jquery.com/?s=.load – Jeff Shaver Apr 05 '13 at 18:13
@TravisJ http://api.jquery.com/category/deprecated/deprecated-1.8/ – Ian Apr 05 '13 at 18:14
1

@TravisJ That `load()` is not deprecated, http://api.jquery.com/load-event/ is. – JJJ Apr 05 '13 at 18:14
1

@JeffShaver the updated code also works great with me is that safely played than the previous code? – Masriyah Apr 05 '13 at 18:15
http://stackoverflow.com/questions/4584373/difference-between-window-loadfunction-and-document-readyfunction – Ian Apr 05 '13 at 18:17
This has been a great and useful discussion. Thanks everyone! – Masriyah Apr 05 '13 at 18:20
1

@Amina using `.on('load'` is fine. glad it solved the issue – Jeff Shaver Apr 05 '13 at 18:30
@JeffShaver i have an infinite-scroll javascript question coming up you think you might be able to help? :D – Masriyah Apr 05 '13 at 18:36

Running JavaScript after page has been loaded

1 Answers1