Javascript 尝试加载第一个图像时FlexSlider图像失真/跳跃？

所以我的FlexSlider最初加载得很慢。我寻找了一些答案，然后看到了答案。当我试图实现最有用的答案时，出现了一些问题。现在，我的网站似乎扭曲了图像，图像加载时会“闪烁”。（我在Safari和Chrome中专门对此进行了检查。）

---

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

我看到的是回流和重新喷漆。 为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： 并使用渐进式JPEG

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

---

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

当我添加高度和宽度时，由于某种原因，它实际上拉伸了我的图像。但我确实压缩了JPEG。在这个例子中：他们添加了.flexslider{min height:280px；background:#FFF url（images/flex/loader.gif）no repeat center；}你应该有较少的闪烁效果。对于您的网站，最小高度：200px；