Искажение / скачок изображения FlexSlider при попытке загрузить первое изображение?

Question

Искажение / скачок изображения FlexSlider при попытке загрузить первое изображение?

0

Поэтому мой FlexSlider на моем сайте загружался медленно изначально. Я искал ответы и видел медленную загрузку изображения Flexslider. Когда я попытался реализовать наиболее полезные ответы, возникли некоторые проблемы. Теперь мой сайт, кажется, искажает изображение, "мигает", когда изображение загружается. (Я проверил это специально в Safari и Chrome.)

Кто-нибудь знает, как заставить его загружаться быстрее, но не запутаться, как сейчас?

kkeune 21 дек. 2013, в 04:16

Источник

Теги:

javascript

jquery

html

css

flexslider

1 ответ

Ещё вопросы

Tobino · Answer 1 · 2013-12-21T07-47-00.000Z

То, что я вижу, - это переплавка и перекраска. Указание ширины и высоты для всех изображений внутри 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 И использование прогрессивных jpegs

Minify flexslider.css и jquery.flexslider.js в производстве

Он должен загружаться быстрее и не испортить вашу версию.

Когда я добавил в высоту и ширину, он по некоторым причинам растягивал мои изображения. Но я сжал JPEG.
В этом примере: woothemes.com/flexslider Они добавили .flexslider {min-height: 280px; фон: #FFF url (images / flex / loader.gif) центр без повтора центра; } Вы должны иметь меньше мерцающего эффекта. Для вашего сайта min-height: 200px;