0

多くの画像のスワイプ可能なスライドショーを作成しようとして、Swipe.jsとlazyloader.jsの 2 つのプラグインをつなぎ合わせようとしています。Swipe プラグインのスライドショー タイマー イベントで、Lazyloader 内の update 関数を呼び出したいと考えています。調査の結果、私の問題は namespace の 1 つに見えるようです。つまり、Swipe は Lazyloader 内のものを認識していないため、関数を呼び出すことができません。

  1. 次のコードが与えられた場合、私は自分の問題を正しく理解していますか?
  2. もしそうなら、どうすれば Swipe に Lazyloader の機能にアクセスさせることができますか?

ありがとうございました。

フォローアップ: Cheeso との Q&A の後、最終的に何が必要かについて、私が間違った質問をしていたことに気付きました。私の悪い質問のために将来の読者が混乱するのを避けるために、このコメントを追加します. これは、名前空間に関するものでも、プライベート関数へのアクセスに関するものでもありません。これは行うべきではありません。このスレッドは、自分が何をしているのか本当にわからない場合に、フランケンシュタイン ライブラリを一緒に試すことがいかにお勧めできないかについての最終的なスレッドです。; ) フォローアップを終了

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

これと同じくらい簡単かもしれません：callbackLazyLoaderのことを行う関数を指すようにスワイプインスタンスのオプションを設定します。スワイプがわからないため、これは単なる推測ですが、コードダンプを調べて、そのコールバック関数を確認しました。スワイプの拡張の要点のようです。

私が正しければ、それは名前空間の問題ではありません。それはあなたが言ったことです-異種のライブラリやモジュールを一緒に編みます。通常、jsモジュールにはこれを可能にする拡張ポイントが1つか2つあります。スワイプの拡張ポイントはそのコールバックだと思います。

多分このようなもの：

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"}); 
});

slider1doc.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、lazyloadでオプションを指定します。（ http://www.appelsiini.net/projects/lazyloadを参照してください）次に、プラグインはそのコンテナのビューポートを監視し、必要に応じて画像をロードします。「lazyload」を再度呼び出す必要はなく、コールバックも必要ありません。

これが機能しない場合は、lazyloadで想定されているため、スワイプとjquery.lazyload.jsを一緒に使用できない可能性があります。その場合でも、遅延読み込みを取得できますが、自分で行う必要があります。

これを行うには、lazyload.jsを完全に削除します。次に、スワイプコールバックで、lazyloadに実行させたいことを実行しますsrc。「次の」画像に属性を設定します。属性を設定すると、Webページに画像が読み込まれます。遅延読み込みを取得するには、元の状態でsrc、スワイプを開始する前に、すべての画像の属性を空白にするか、固定画像のURLに設定する必要があります。さて、あなたは尋ねるかもしれません：コールバックで、どの画像をロードするかをどうやって知るのでしょうか？そして、どのURLをsrc属性に設定しますか？それはあなたが決めることです。そのコールバックでスワイプから適切な情報を取得する方法があると思います。

これを理解していない場合は、ブラウザが画像を処理する方法の基本的な理解を確立するために、いくつかの指示またはさらに読む必要があります。私の読書から、lazyloadを呼び出すためにスワイプする必要はありませんupdate()。

いくつかの一般的な提案：

  • どのモジュールでも、そのモジュールの内部で定義された関数を呼び出そうとしないでください。それらは理由のために内部的です。

  • どのモジュールでも、自分が何をしているのかを確実に理解している場合を除いて、そのソースコードを変更しないでください。いろいろと試している場合は、コードを独自のモジュールに配置してください。独自のJavaScriptコードは、Webページ、またはWebページによって参照される別のモジュールに属します。

  • 正当な理由がない限り、おそらく関数を定義するべきではありません $(document).ready()。

  • ドキュメントを読んでください。今日までスワイプやレイジーロードのことは聞いたことがありませんでした。ここで私がそれらについて行った提案（具体的には、スワイプのコールバックとlazyloadのコンテナーオプションに関して）は、 それらの使用方法についてのドキュメントを読んだことから来ました。

于 2012-04-26T00:52:04.987 に答える