モバイルで再描画の背景画像を防止する

Question

私はちょうどの問題を解決する必要がある "レガシー" sitebuildプロジェクトを獲得しました。 ギャラリーのように機能するセクションがあります。すべての画像は背景画像です（多くの画像があります）。ユーザーがスクロールダウンすると、貧弱なブラウザーがユーザーにコンテンツを表示しようとしているが、速いユーザーがいるユーザーに追いついていないことがわかります。

.image-content{ 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: center; 
    width: 100%; 
    height: 20vw; 
    display: inline-block; 
    position: relative; 
    vertical-align: bottom; 
    margin: 0px; 
} 

私の質問：ここで

はその美しいHTML

<section class="gallery"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-xs-12"> 
       <div class="columns-content"> 
        <a href="imageurl1"> 
         <div class="image-content" style="background-image('img1.png')"></div> 
        </a> 
        <a href="imageurl2"> 
         <div class="image-content" style="background-image('img2.png')"></div> 
        </a> 
        <!-- there are 30 more images like that --> 
       </div> 
      </div> 
     </div> 
    </div> 
</section> 

、ここではいくつかのスタイルがあるの一部である再描画するために、これらの画像を予防する方法はありますか？ 私はtransform: translateZ(0);とwill-change: transform;のトリックを試みましたが、どれも私のために働いていませんでした。私はやめて、私が役に立たないことについての隅で泣き始めるべきですか？

乾杯！

Answer 1

パフォーマンスを向上（および偽造）するためにいくつか試してみることができます。

1. 少なくともショーにプレースホルダを使用しimg解像度
2. 使用visibility: hiddenおよび/またはdisplay:none（さらに説明怒鳴る）
3. を減らして何かを「高速指のユーザー」（現在はウェブがロードされていることを、彼らはそうこれには、数2のためには、ユーザーの位置に応じて、ユーザーのスクロールや表示/非表示を切り替えます内容をキャプチャEventListenerを使用することができます偽のアプローチ）

です。

あなたが言うことdisplay: noneから切り替えた場合display: blockreflowが発生しますのでご注意ください。 visibility: hiddenからvisibility: visibleへの切り替えのみrepaint

がthis questionを見てください原因になります。

PS：別の（全く異なる）アプローチは、infinite scrollingからmulti-pageウェブに変更することです。これがあなたの要求に合っているかどうかを見てください。