bLazy image lazyloadingがionic2と組み合わせて動作しない

現在、bLazyの遅延読み込みスクリプトをangular2とionic2と組み合わせて使用しようとしています。 HTMLだけで、それ自体ではJavaScriptを使用してbLazy image lazyloadingがionic2と組み合わせて動作しない

は魅力のようにして期待通りに動作します：

<html> 
<head> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/blazy/1.6.2/blazy.min.js"></script> 
</head> 
<body> 
<script> 
    // Example 
    var bLazy = new Blazy({ 
     src: 'blazy-data' // Default is data-src 
    }); 
</script> 

<style> 
    .b-lazy { 
     -webkit-transition: opacity 500ms ease-in-out; 
     -moz-transition: opacity 500ms ease-in-out; 
     -o-transition: opacity 500ms ease-in-out; 
     transition: opacity 500ms ease-in-out; 
     max-width: 100%; 
     opacity: 0; 
    } 
    .b-lazy.b-loaded { 
     opacity: 1; 
    } 
    .imgbg { 
     background-color:#b0b0b0; 
     max-width: 400px; 
     padding: 2px; 
     border-color: #fff; 
     border-style: solid; 
    } 
</style> 

<div class="imgbg"><img class="b-lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw" blazy-data="http://lorempixel.com/400/400/abstract" border="1" width="400" height="400" /></div> 
<div class="imgbg"><img class="b-lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw" blazy-data="http://lorempixel.com/400/400/fashion" border="1" width="400" height="400" /></div> 
<div class="imgbg"><img class="b-lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw" blazy-data="http://lorempixel.com/400/400/city" border="1" width="400" height="400" /></div> 
<div class="imgbg"><img class="b-lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw" blazy-data="http://lorempixel.com/400/400/sports" border="1" width="400" height="400" /></div> 
<div class="imgbg"><img class="b-lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw" blazy-data="http://lorempixel.com/400/400/people" border="1" width="400" height="400" /></div> 

</body> 
</html>

この1つは遅延ロードされている画像のプレースホルダを示し、そして、すぐに、彼らはビューポートに入って来るように、GETロードされ、示される。（jsfiddle hereと同じコード）

ionic2アプリ内で同じDIVを使用している場合、遅延ロードは機能しません。角度でbLazyを使用する方法については、ドキュメントに記載されているメカニズムを使用しています。

最初の初期化後にイメージをロードするだけではありません。だから私はそれがタイミングの問題かもしれないと思ったが、ボタンを使ってbLazyのrevalidateメソッドを呼び出すときでさえ、ビューポート内の画像だけを読み込み、他のすべての画像は無視される。

例えば、このplunkrを確認してください：https://plnkr.co/edit/5LoBQ389PQv4AlBTlbjw?p=preview

誰が正しくionic2と一緒bLazyを使用する方法、このための回避策を知っているかいますか？

ありがとうございます。

出典

2016-07-20 Olli

あなたがここに二つの問題があります。

1）あなたは、コンテナを指定しない場合、bLazyだけwindowのスクロールイベントをリッスン - このケースでは、あなたはscroll-contentのスクロールイベントに耳を傾けることが必要です。

2）タイミングには奇妙なことがあります。私は何と理由があるのかを100％確信しているわけではありませんが、下の解決策はそれを解決します。

/* ... */ 

export class HomePage { 

    /* ... */ 

    ionViewLoaded() { 
    this.bLazy = new Blazy({ 
     src: 'blazy-data', // Default is data-src 
     container: 'scroll-content' 
    }); 
    } 

    ionViewDidEnter() { 
    this.bLazy.revalidate(); 
    } 

    constructor(private nav: NavController) { 
    } 

    /* ... */ 

}

ionViewLoadedとionViewDidEnterはIonic 2 Lifecycle eventsです。

ページの準備が整うと、理論的にはionViewLoadedで十分です。しかし何とかしていないので、単にbLazyをアクティブなページに再検証します。

出典

2016-07-22 11:07:53

このソリューションをお寄せいただきありがとうございます。それは本当にうまくいくようです。私は、ライフサイクルイベント名がbeta7からbeta8に変更されたという事実に注意を払う必要がありました。もう1つは、bLazyを再検証する前に300msのタイムアウトが必要な場合がありますが、それがうまくいきます。 – Olli

bLazy image lazyloadingがionic2と組み合わせて動作しない

答えて

関連する問題