jquery - Jquery Lazyload コールバック

Question

私は現在Jquery Lazy Loadを使用していますが、コンテナーからのすべての画像の読み込みが終了したとき (遅延読み込みがすべての魔法を行ったとき) にコールバックを作成する方法があるかどうか疑問に思っていました。

これは、jScrollPane プラグインも使用しており、jScrollPane 再初期化関数を呼び出したいためです。

ありがとう'

Answer 1

ソースを見ると、遅延ロードプラグインは、settings.loadロードされた画像要素といくつかのパラメーターを渡して画像をロードした後、関数を呼び出すようです。

if (settings.load) {
    var elements_left = elements.length;
    settings.load.call(self, elements_left, settings);
}

したがって、おそらく次のように設定する必要があります。

function yourhandler(element, el_left, settings) {
    //Whatever you want
    //This function will be called each time that an image (element in this case) is loaded
}
$("img.lazy").lazyload({ 
    load : yourhandler
});

イメージがロードされていることを確認したい場合は、ロードされたイメージにリスナーをアタッチできます。

function yourhandler(element, el_left, settings) {
    element.load(function() {  
        alert('Image Loaded');  
    });
}

編集

コードを試した後、最も「クリーンな」方法は.load、画像のメソッドにアタッチすることです。

$('img.lazy').load(function() {
    console.log($(this).attr('src') + ' loaded');
});

$('img.lazy').lazyload({
    container:$('.p_content'),
});​

http://jsfiddle.net/eRyww/72/

Answer 2

別の答えとして、まさにそれを行う「遅延ロード」プラグインを作成しました。すべての要素がロードされた後、コールバックを提供します。これは少し異なり、画像だけではなく、選択した要素がブラウザーのビュー ペインに表示されるときはいつでもです。

https://github.com/shrimpwagon/jquery-lazyloadanything

Answer 3

最後に読み込まれた画像を処理し、コードのみを実行し、それが終了したとき (すべての画像が読み込まれたとき) にのみ、関数呼び出しが 2 つのパラメーターのみを送信する必要があるのとは異なり、VAShhh が前に言ったように、ハンドラー関数を使用する必要があるため、この関数が呼び出されます。 JavaScript call ステートメントを使用します。

次に、「 elements_left 」パラメーターを正常に取得し、それを 0 (ゼロ): 最後にロードされた左の画像と比較することができます。このようなもの：

function yourhandler(elements_left, settings) {
    var imageNode, container;
    if(elements_left === 0) {
       // All images were loaded.
       // Now do whatever you need with imageNode or its parents (container, etc) in order
       // to run any other Plugin
       imageNode = $(this);
       container = settings.container;
       alert('Ready to continue! Image node is $(this) and container settings.container');
    }
}

jsfiddle.net/eRyww/4でこの例を確認してください。