Question

此插件用于制作全屏背景幻灯片。

当我想在文档加载时调用它时它非常好：

$(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上触发。

或者您可以添加一个公共destroy方法，该方法可以在使用新参数再次初始化插件之前完全删除插件dom元素和事件绑定。

Answer 2

任何技巧，比如将它粘贴在一个函数中并随时随地调用它，从任何你想要的地方......？

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

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

Answer 3

我认为你可以完美地称这个插件填充了一组新的图像作为这样的函数：

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

在jQuery中，如何调用一个适用于load事件的`function`？

3 个答案: