レイジーは私AngularJsアプリでカルーセルをlazyloadするLazysizesを使用してLazySizes

Question

- 私とカルーセルのイメージのロード。

画像にlazysizeしても機能しますが、画像を変更するために矢印ボタンをクリックした瞬間に画像がロードされるため、効果はありませんが、画像は数ミリ秒です白い。これはコードです：

<div class="carousel slide"> 
          <carousel interval="-10"> 
           <slide ng-repeat="i in imagesList"> 
            <img data-src="image-url.jpg" class="lazyload" /> 
           </slide>          
          </carousel> 
         </div> 

しかし、私がしたいのは、カルーセル自体をlazyloadすることです。しかし、カルーセルがロードされた瞬間は、そのカルーセル内のすべての画像は、その醜い影響を回避するためにロードする必要があります。

<div class="carousel slide lazyload"> 
         <carousel interval="-10"> 
          <slide ng-repeat="i in imagesList"> 
           <img ng-src="image-url.jpg" /> 
          </slide>          
         </carousel> 
        </div> 

これを行う方法や可能な場合はわかりません。私のカルーセルはブートストラップから来ていると思います。2.3.2

Answer 1

特定のコンポーネントのすべてのイメージがロードされているイベントを聴きたい場合は、このライブラリが役に立ちます - https://github.com/desandro/imagesloaded。イメージがロードされたときは、初期化またはカルーセルをリロードすることができます。

$element.imagesLoaded(function() { 
    // reload carousel 
}); 

カルーセルを読み込むときに、初期化する前にng-repeatがレンダリングを完了するのを待つ場合には、時には便利です。あなたは説明のためにここを見てとることができます。

https://stackoverflow.com/a/39346023/1385281

Answer 2

あなたが行うことができます

最初の事はあなたのイメージを圧縮している：

PNG：

http://compresspng.com/it/

あなたはそれを使う必要がある場合JPEGの代替compressjpeg.com

それはすぐにあなたのイメージをロードする上で役立ちます。

https://www.sitepoint.com/five-techniques-lazy-load-images-website-performance/

Answer 3

ベストソリューションはdata-srcsetと一緒に、srcのために小さな、ぼやけ代替画像を使用することです。そして、私は本当に面白い記事を見つけました。これがないと、コントローラinitの小さな親指をロードし、彼らが見えてきたときに大規模なものをロードしています。
摺動が完了するまでに、大きな画像は通常、既に読み込まれて表示され、ぼやけた親指の代わりに表示されます。フォーカスインエフェクトが目立つときでも、プロフェッショナルに見えます。ここで

はworking exampleです。
ネットワークの帯域幅を絞ったビデオ録画です：
https://www.youtube.com/watch?v=mydnPTIc-4g&feature=youtu.be - あなたがyoutu.beでビデオをアップロードしたときの画質が大幅に低下しました。これについてはあまりできませんが、実際に効果が認められます。

私は親指に単純なガウスぼかし効果を使用し、100％の品質を大切に保存して、それらがあまりにも速く読み込まれないようにしました（サイズは@ 80％これは通常は本番環境で使用する必要があります）。

典型的な要素は次のようになります。彼らはまだあまりにも速くロード（とあなたが効果を気づかない）場合

<div class="item"> 
    <img src="./02-small.jpg" 
      data-srcset="./02-medium.jpg 768w, 
         ./02.jpg 1200w" 
      class="lazyload img-responsive" /> 
</div> 

、（ネットワークタブ上）デベロッパーコンソールにアクセスし、リミット（スロットル）ネットワーク帯域幅。角度付き

---

、これは意味します：

.carousel .img-responsive { 
    min-width: 100%; 
} 

<div class="carousel slide"> 
    <carousel> 
    <slide ng-repeat="i in imagesList"> 
     <img ng-src="./{{i.filename}}-small.jpg" 
      data-srcset="./{{i.filename}}-medium.jpg 768w, 
          ./{{i.filename}}.jpg 1200w" 
      class="lazyload img-responsive" 
     /> 
    </slide>          
    </carousel> 
</div> 

機能するためには、結果のURLは、異なるサイズの既存のファイルを指している必要がありますし、方法を調整する必要があるかもしれませんあなたの場合に応じて、それぞれの道を作ります。