In jQuery, how to call a `function` that works on load event?

I'm using Supersized jQuery plugin.

This plugin is used to make full sc开发者_JAVA百科reen background slides.

It works very fine when I want to call it on document load:

$(document).ready(function(){
    $.supersized({
        slides  :  [
           { image :'sh490.jpg', title : 'title 1', url : '' },
           { image :'sh390.jpg', title : 'title 2', url : '' }
        ]
    });
});

What if I want to call $.supersized({ .. }); (again or for the first time) with new params without reloading the page... For example after calling an Ajax function that returns "new images to be slided"..

Any tricks?

---

As I said in my comment you need to trigger the load event after setting new options. This is because the developer has bound the functionality to the event internally. You can trigger the event manually with $(window).trigger('load'). However this may have negative consequences because any other event handlers bound to this event are going to fire again as well so keep that in mind.

If I were you I would fork his code from github and modify it to use a custom event and then bind a function that triggers that custom event to window.load. This way you can trigger only that custom event from your click or loading function and have it triggered initially on window.load.

Or you could add a public destroy method that completely removes injected dom elements and event bindings the plugin has created before initializing it again with new parameters.

---

Any tricks like sticking it in a function and calling it whenever you want, from wherever you want...?

var superSizeMe = function(p){
    $.supersized({ slides  : p });
};

$.getJSON("myfile.json", function(json){
    superSizeMe(json);
});

---

I think you could perfectly call this plugin filled with a new set of images as a function like this:

mySlidesFunction(jsonSlides){
    $.supersized({slides  :  jsonSlides});
}