В jQuery, как вызвать `функцию`, которая работает на событие загрузки?

Question

Я использую Увеличенный плагин jQuery .

Этот плагин используется для создания полноэкранных фоновых слайдов.

Очень хорошо работает, когда я хочу вызвать его при загрузке документа:

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

Что делать, если я хочу вызвать $.supersized({ .. }); (снова или впервые) с новыми параметрами без перезагрузки страницы ... Например, после вызова функции Ajax, которая возвращает «новые изображения для слайда» ..

Есть хитрости?

Answer 1

Как я уже сказал в своем комментарии, вам нужно вызвать событие load после установки новых опций. Это потому, что разработчик привязал функциональность к событию внутренне. Вы можете вызвать событие вручную с помощью $(window).trigger('load'). Однако это может иметь негативные последствия, поскольку любые другие обработчики событий, связанные с этим событием, также будут запускаться снова, так что имейте это в виду.

На вашем месте я бы раскошелил его код с github и изменил его для использования пользовательского события, а затем связал функцию, которая запускает это пользовательское событие, с window.load. Таким образом, вы можете инициировать только это пользовательское событие из функции щелчка или загрузки и запустить его изначально на window.load.

Или вы можете добавить публичный метод уничтожения, который полностью удаляет внедренные элементы dom и привязки событий, созданные плагином, прежде чем снова инициализировать его новыми параметрами.

Answer 2

Любые уловки, такие как вставка в функцию и вызов ее в любое время, откуда угодно ...?

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

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

Answer 3

Я думаю, вы могли бы прекрасно назвать этот плагин, заполненный новым набором изображений, как функцию, подобную этой:

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