防止在手機上重新繪製背景圖像

我剛剛贏得了一個「遺留」sitebuild項目，我需要修復一些問題。有一個像畫廊一樣工作的部分。每張圖片都是背景圖片（其中有很多）。當用戶向下滾動時，您可以看到，糟糕的瀏覽器正試圖向用戶顯示內容，但無法跟上手指快速的用戶。防止在手機上重新繪製背景圖像

下面是一些漂亮的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>

和這裏的一些風格：

.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; 
}

我的問題：有沒有一種方法，以防止這些圖像重繪？我嘗試了transform: translateZ(0);和will-change: transform;技巧，但他們都沒有爲我工作。我應該放棄並開始在角落裏哭泣：我是多麼無用？

乾杯！

來源

2017-05-25 cs.matyi

你試過優化你的圖片嗎？它看起來像是'png'，那麼使用'jpeg web'怎麼樣？你能降低他們的分辨率嗎？你可以發佈網址，以便我們測試性能嗎？ –

@ArnauFernández每個圖像都是.jpeg，沒有一個大於40kb –

你可以嘗試一些事情來提高（和假冒）性能。

減少img分辨率
使用visibility: hidden和/或display:none（進一步解釋波紋管）
使用佔位符至少顯示的東西「快手指的用戶」，所以他們現在的網頁加載（這是假的方法）

因此，對於第2號，你可以使用一個EventListener捕獲用戶滾動和隱藏/顯示內容根據用戶的位置。

請注意，如果您從display: none切換到說display: block一個reflow會發生。從visibility: hidden到visibility: visible切換隻會導致repaint

請看看this question。

PS：另一種（完全不同的）方法是將網頁從infinite scrolling更改爲multi-page。看看這是否適合你的要求。

來源

2017-05-25 10:53:45

嘗試了前2個選項。減少了所有圖像，當用戶滾動時更改可見性屬性，也使用了requestAnimationFrame，但沒有一個解決完整的問題。也許我應該把圖片切成小塊？ –

防止在手機上重新繪製背景圖像

回答

相關問題