嘗試加載第一個圖像時FlexSlider圖像失真/跳躍？

因此，我的FlexSlider my site原本是緩慢加載的。我搜索了一些答案，並看到Flexslider slow image load。當我試圖實現最有用的答案時，發生了一些問題。現在我的網站似乎扭曲了圖像，在圖像加載時「閃爍」。（我已經在Safari和Chrome中專門檢查了這個）。嘗試加載第一個圖像時FlexSlider圖像失真/跳躍？

有沒有人有任何想法如何使它加載速度更快，但不會因爲它目前正在做的事情搞砸？

來源

2013-12-21 kkeune

我看到的是迴流焊和重漆。指定FlexSlider內部所有圖像的寬度和高度。

<div class="flexslider"> 
    <ul class="slides"> 
    <li> 
     <img src="flex/images/slide1.jpg" alt="Residential doors." width="800" height="300"/>... 
    </li> 
    <li> 
     <img src="flex/images/slide2.jpg" alt="Commercial doors." width="800" height="300"/>... 
    </li> 
    <li> 
     <img src="flex/images/slide3.jpg" alt="One of our installations." width="800" height="300"/>... 
    </li> 
    </ul> 
</div>

壓縮您的JPEG： https://developers.google.com/speed/docs/best-practices/payload#CompressImages 並使用漸進式Jpeg可

縮減大小flexslider.css和jquery.flexslider.js生產

應該加載速度更快，而不是搞砸了你的版本。

來源

2013-12-21 10:30:24 Tobino

當我在高度和寬度上添加時，實際上由於某種原因拉伸了我的圖像。但我確實壓縮了jpeg。 – kkeune

在此示例中：http://www.woothemes.com/flexslider/ 他們添加了 .flexslider最小高度：280px; background：#FFF url（images/flex/loader.gif）no-repeat center center; } 你應該有較少的閃爍效果。爲您的網站min-height：200px; – Tobino

嘗試加載第一個圖像時FlexSlider圖像失真/跳躍？

回答

相關問題