尝试加载第一张图像时FlexSlider图像失真/跳转？

Question

所以my site上的我的FlexSlider最初加载缓慢。我搜索了一些答案并看到Flexslider slow image load。当我尝试实现最有用的答案时，出现了一些问题。现在我的网站似乎扭曲了图像，在图像加载时“闪烁”。 （我在Safari和Chrome中专门检查了这一点。）

有没有人知道如何让它加载得更快，但不会像现在这样搞乱？

Answer 1

我看到的是回流和重画。 为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 并使用Progressive jpegs

在生产中缩小flexslider.css和jquery.flexslider.js

它应该加载更快，而不是弄乱你的版本。