为了尝试为许多图像制作可滑动的幻灯片,我试图将两个插件Swipe.js和lazyloader.js拼接在一起。我想让Swipe插件中的幻灯片定时器事件调用Lazyloader中的更新功能。 From researching, it seems my problem appears to be one of namespace;也就是说,Swipe不了解Lazyloader中的内容,因此无法调用该函数。
谢谢。
跟进: 在Q& A与Cheeso之后,我现在看到我在提出最终需要发生的问题时提出了错误的问题。我添加这个评论,以避免因为我的不好问题而让任何未来的读者感到困惑。这与名称空间无关,甚至与访问私有函数which shouldn't be done无关。如果你真的不知道自己在做什么,这个帖子非常关注如何与frankenstein图书馆一起尝试是不可取的。 ; ) 结束后续
swipe.js中的回调:
this.callback = this.options.callback || function() {
在html中调用的脚本:
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.lazyload.js" type="text/javascript"></script>
<script src='js/swipe.js' type="text/javascript"></script>
<script type="text/javascript">$(document).ready(function() {
function myAlert(){
//call a function from inside jquery.lazyload.js
alertMe();
}
//instantiate a swipe object and pass in a bunch of
//options, especially "callback" which fires on every slide change
window.mySwipe = new Swipe(document.getElementById('slider1'), {
startSlide: 0,
speed: 1000,
auto: 5000,
callback: function(){
myAlert();
}
});
// run lazyload on every VISIBLE image with the class "lazy" on load, and on every click
$("img.lazy").lazyload({event: "click", effect : "fadeIn", threshold: 0,});
});
</script>
jquery.lazyloader.js:
//outside of the container below, I can be called by myAlert()
function alertMe() {
alert("it worked!");
}
(function($, window) {
$window = $(window);
$.fn.lazyload = function(options) {
///
///Here be a bunch of lazyloader stuff
///
//I work when above, but once I am inside this container, I cannot be called by myAlert(),
//and I will error as 'not a valid function'
function alertMe() {
alert("it worked! Even inside of this container! ");
}
})(jQuery, window);
答案 0 :(得分:2)
可以这么简单:将Swipe实例上的callback
选项设置为指向执行LazyLoader操作的函数。这只是一个猜测,因为我不知道刷卡,但我查看了代码转储并看到了回调函数;它似乎是Swipe扩展的关键点。
如果我是正确的,那么它根本不是名称空间问题。这就是你所说的 - 将不同的库或模块编织在一起。通常,js模块将具有一个或两个允许此扩展点的扩展点。我猜Swipe的扩展点就是回调。
也许是这样的:
function myFn() {
// do whatever lazyload thing you want to do, here.
}
$(document).ready(function() {
var slider1 = new Swipe(document.getElementById('slider1'),
{startSlide: 0,
speed: 1000,
auto: 10000,
callback:myFn});
$("img.lazy").lazyload({event: "click"});
});
您可能必须重构以使slider1
或其他变量成为全局变量,因此可以在doc.ready函数之外访问它们。
<强>后续强>
你有这个:
<script type="text/javascript">
$(document).ready(function() {
function myAlert(){
//call a function from inside jquery.lazyload.js
alertMe();
}
//instantiate a swipe object and pass in a bunch of
//options, especially "callback" which fires on every slide change
window.mySwipe = new Swipe(document.getElementById('slider1'), {
startSlide: 0,
speed: 1000,
auto: 5000,
callback: function(){
myAlert();
}
});
$("img.lazy").lazyload({event: "click", effect : "fadeIn", threshold: 0,});
});
</script>
该代码存在一些问题。它应该更接近这个:
<script type="text/javascript">
function myThing(){
// ** Do something useful here. This may involve calling
// ** other functions. Those functions need not be defined
// ** within jquery.lazyload.js.
}
$(document).ready(function() {
//instantiate a swipe object and pass in a bunch of
//options, especially "callback" which fires on every slide change.
// ** There is no need, as far as I can tell, to assign the
// ** output to a global variable. (window.mySwipe). In fact, given
// ** the code you have, there is no need to retain the output at all.
new Swipe(document.getElementById('slider1'), {
startSlide: 0,
speed: 1000,
auto: 5000,
// ** Just use the function name. You don't need to define
// ** a new anonymous function to wrap around it.
callback: myThing
});
$("img.lazy").lazyload({event: "click", effect : "fadeIn", threshold: 0,});
});
</script>
更多强>
我想你想要的是懒洋洋地加载“下几张”图像
当用户滑动列表时,它们可用。从我的角度来看
阅读(简要),您只需要为所有图像调用lazyload()
一次
在页面上。如果您的图像位于“容器”内,请指定
lazyload上的container
选项。 (看到
http://www.appelsiini.net/projects/lazyload)然后插件监视
该容器的视口并根据需要加载图像。有
无需再次调用“lazyload”,无需回调。
如果是这样的话 不工作,然后Swipe和jquery.lazyload.js可能无法一起使用, 因为在lazyload中做出的假设。在那种情况下,你仍然可以 得到懒惰,但你需要自己做。
为此,完全消除lazyload.js 。然后,在Swipe回调中,执行您希望lazyload完成的操作:在“next”上设置src
属性
图片。设置该属性将导致网页加载
图片。要获得延迟加载,在原始状态下,所有的src
属性
在滑动之前,图像必须为空白或设置为某个固定图像URL
开始。现在,您可能会问:在回调中,您如何知道要加载哪个图像?
以及要设置为src属性的URL?这取决于你
确定。我认为有一些方法可以得到合适的
来自该回调中的滑动信息。
如果您不理解这一点,那么您需要一些指导或一些指导
进一步阅读建立对浏览器如何基本的理解
处理图像。从我的阅读中,你不需要刷卡来打电话
lazyload的update()
。
一些一般性建议:
对于任何模块,您都不应该尝试调用已定义的函数 该模块的内部。它们是内部的原因。
对于任何模块,除非您这样做,否则不应修改其源代码 非常肯定你知道你在做什么。如果你在四处寻找 尝试一下,把代码放在你自己的模块中。您自己的javascript代码属于网页,或者属于网页引用的单独模块。
你可能不应该在其中定义函数
$(document).ready()
除非你有充分的理由。
阅读文档。我之前从未听说过Swipe或lazyload 今天。我在这里提出的关于他们的建议 - 具体来说,关于他们 Swipe上的回调,以及lazyload上的容器选项 - 来自我 阅读如何使用它们的文档。