web-dev-qa-db-ja.com

JqueryLazyloadコールバック

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

これは、 jScrollPane Plugin も使用していて、jScrollPane再初期化関数を呼び出したいためです。

ありがとう '

jqueryjquery-pluginscallbacklazy-loadingjscrollpane
13
Alvaro

ソースを見ると、遅延読み込みプラグインは、読み込まれた画像要素といくつかのパラメーターを渡して画像を読み込んだ後、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/

22
VAShhh

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

次に、「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

1
Eduard Roura

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

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

1
shrimpwagon