3

この2つのプラグインが連携する可能性はありますか？現在、画像を含むdivでiscrollを使用すると、画像が表示されるタイミングを遅延読み込みで検出できません。

ありがとう。

編集：

コメントの1つで述べたように、私は次のようにスクロールにlazyloadを適用しようとしました。

onScrollMove: function () {
    $("img").lazyload();
    $('img').on('load',function(){myScroll.refresh();});
}

正しく機能するには、同じことをonBeforeScrollEndに適用する必要があると思います。

onBeforeScrollEnd: function () {
    $("img").lazyload();
    $('img').on('load',function(){myScroll.refresh();});
}

しかし、このソリューションはパフォーマンスに影響を与えていますか（すべての画像にレイジーロードを継続的に適用し、ロードされた画像の幅/高さに再適応するためにロードされたときに更新されるため）？画像付きのすべてのテーマの中にいくつかの（たとえば30個の）スクローラーが含まれるコンテナースクローラーがあるので、ここでのパフォーマンスについては本当に心配しています。他に何ができますか？

編集2：

これは私がこれまでに持っているものであり、ほとんどうまくいくと思います。

onScrollMove: function() {
    $('#my_container img').lazyload({
        container: $('#my_container'),
        threshold: 200
    }).on('load', function() {
        myScroll.refresh();
    });​
}

ただし、このソリューションの問題は、myScrollが最初に更新されるときに、lazyloadがすべての画像をロードすることです。

ここにフィドルがあります：http：//jsfiddle.net/U3gYS/

また、最初の画像が最初から表示可能である場合、lazyloadはその画像をロードしないという問題もあります。http://jsfiddle.net/U3gYS/1/

編集3：

http://jsfiddle.net/pdakD/ほぼ手元にありますので、助けてください。新しいフィドルでは、問題は次のとおりです。

  1. onBeforeScrollEndが機能していないようです。console.log（'something'）を含めると、スクロールの開始時に起動しているように見えます。

  2. 最初の#containerの高さは、span +firstimgです。見栄えを良くするために、パディングボトム（大きすぎない）を追加し、最後の画像が最終的に読み込まれたときに削除しました...他に何ができますか？

編集4：

これは良く見えます：http：//jsfiddle.net/pdakD/1/.onBeforeScrollEndはまだ私には悪いように見えます。私にもこのオプションがあります：http：//jsfiddle.net/pdakD/1/適用されます

checkDOMChanges:true

しかし、私は複数のiscrollerやajaxデータなどを持っているので、良い考えではないと思います。

解決策： これは、MichaelAlexanderFreundによって提案された解決策のjfiddleです。 http://jsfiddle.net/pdakD/11/ 動作しますが、高速で「スクロール」すると下部でスタックします。

4

2 に答える 2

6

今日、私は同じ問題を抱えていましたが、lazyloadがリッスンしているスクロールイベントがトリガーされないことがわかりました。したがって、実行する必要があるのは、スクロールコンテナのスクロールイベントを手動でトリガーすることだけです。onScrollEndiScrollからのコールバックを使用して、

onScrollEnd: function () {
    $('div.scroll').trigger('scroll');
}

iScroll$('div.scroll')で使用したコンテナは

var scroll, container;

container = $('div.scroll');
scroll    = new iScroll(container.get(0), {
    bounce: false,
    onScrollEnd: function () {
        container.trigger('scroll');
    }
});

これがlazyloadメソッドの外観です

$('img.lazyload').lazyload({
    effect: 'fadeIn',
    container: $('div.scroll')
});

乾杯！

于 2012-12-28T08:52:34.623 に答える
0

これは最善の解決策ではないかもしれませんが、他の誰も答えていないので：

iscrollのonScrollEndイベントでlazyloadメソッドを呼び出してみてください。このようなもの：

 new iScroll('wrapper', onScrollEnd: function() {$("img.lazy").lazyload()});
于 2012-08-20T22:25:24.350 に答える