0

为了为许多图像制作可滑动的幻灯片，我试图将两个插件Swipe.js和lazyloader.js拼接在一起。我想让 Swipe 插件中的幻灯片计时器事件调用 Lazyloader 内部的更新函数。从研究来看，我的问题似乎是 namespace 之一；也就是说，Swipe 不知道 Lazyloader 内部的东西，因此无法调用该函数。

  1. 鉴于以下代码，我是否正确理解我的问题？
  2. 如果是这样，我怎样才能让 Swipe 访问 Lazyloader 的功能？

谢谢你。

跟进：在与 Cheeso 进行问答之后，我现在发现我问错了关于我最终需要发生什么的问题。我添加此评论是为了避免让任何未来的读者因为我的坏问题而感到困惑。这与命名空间无关，甚至与访问不应做的私有函数无关。如果您真的不知道自己在做什么，那么这个线程最终是关于尝试和 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);
4

1 回答 1

2

可以这么简单：将callbackSwipe 实例上的选项设置为指向执行 LazyLoader 操作的函数。这只是一个猜测，因为我不知道 swipe，但是我查看了代码转储并看到了那个回调函数；它似乎是 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()对于页面上的所有图像，您只需要调用一次。如果您的图像位于“容器”内，则 container在延迟加载时指定选项。（参见 http://www.appelsiini.net/projects/lazyload）插件然后监视该容器的视口并根据需要加载图像。无需再次调用“lazyload”，无需回调。

如果这不起作用，则 Swipe 和 jquery.lazyload.js 可能无法一起使用，因为在延迟加载中做出了假设。在这种情况下，您仍然可以进行延迟加载，但您需要自己进行。

为此，请完全消除lazyload.js。然后，在 Swipe 回调中，执行您希望延迟加载完成的操作：src在“下一个”图像上设置属性。设置该属性将导致网页加载图像。要获得延迟加载，在原始状态下src，所有图像的属性必须为空白，或者设置为某个固定的图像 URL，然后才开始滑动。现在，您可能会问：在回调中您如何知道要加载哪个图像？以及将哪个 URL 设置到 src 属性中？这由你来决定。我认为有某种方法可以在该回调中从 Swipe 获取适当的信息。

如果你不明白这一点，那么你需要一些指导或进一步阅读，以建立对浏览器如何处理图像的基本理解。根据我的阅读，您不需要 Swipe 来调用lazyload 的update().

一些一般性建议：

  • 对于任何模块，您都不应该尝试调用该模块内部定义的函数。出于某种原因，它们是内部的。

  • 对于任何模块，除非您非常确定自己知道自己在做什么，否则不应修改其源代码。如果您正在四处寻找和尝试，请将代码放入您自己的模块中。您自己的 javascript 代码属于网页，或网页引用的单独模块。

  • $(document).ready()除非您有充分的理由，否则您可能不应该在其中定义函数 。

  • 阅读文档。在今天之前，我从未听说过 Swipe 或lazyload。我在这里提出的关于它们的建议——特别是关于 Swipe 上的回调和延迟加载上的容器选项——来自我 阅读文档以了解如何使用它们。

于 2012-04-26T00:52:04.987 回答