現在、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を使用する方法、このための回避策を知っているかいますか?
ありがとうございます。
このソリューションをお寄せいただきありがとうございます。それは本当にうまくいくようです。私は、ライフサイクルイベント名がbeta7からbeta8に変更されたという事実に注意を払う必要がありました。もう1つは、bLazyを再検証する前に300msのタイムアウトが必要な場合がありますが、それがうまくいきます。 – Olli