Прелоадер для слайдера WHMCS

[volkinson]

Доброго времени суток. Мучаюсь со слайдером. Поставил обычный слайдер с онлайн конструктора. Столкнулся с такой проблемой, что слайдер не грузит сразу картинку и из-за этого главная страница притормаживает и ждет этот слайдер. Нашел решение - "Прелоадер".
Брал прелоадер отсюда:

Все работает, но не когда картинка находится в слайдере.
Вот исходники слайдера:

<div class="ism-slider" data-play_type="loop" id="main_slider">
  <ol>
    <li>
    <a href="http://svkpro.com/cart.php?gid=1" target="_self">
      <img src="ism/image/slides/_u/eng1reduced.png">
    </a>
    </li>
    <li>
    <a href="http://svkpro.com/smm.php" target="_self">
      <img src="ism/image/slides/_u/eng2reduced.png">
    </a>
    </li>
    <li>
    <a href="http://svkpro.com/domainchecker.php" target="_self">
      <img src="ism/image/slides/_u/eng3reduced.png">
    </a>
    </li>
  </ol>
</div>

Вопрос знатокам: Как установить чуто прелоадер в слайдер? Или прелоадер на весь слайдер, пока все картинки не будут подгружены? Буду признателен за любую полезную информацию/советы.

 

[Den1xxx]

Столкнулся с такой проблемой, что слайдер не грузит сразу картинку и из-за этого главная страница притормаживает и ждет этот слайдер. Нашел решение - "Прелоадер".

Цитата с описания прелоадера:

Прелоадер картинок позволяет визуально показать пользователю, что картинка еще не загрузилась и либо показать шкалу загрузки, что может быть сильно избыточно особенно для маленьких картинок, либо показать небольшой значок свидетельствующий о том, что картинка загружает - именно такой вариант использован в этом прелоадере

То есть он делает ровно то же — не показывает, пока не будет загружено.
Но к объёму слайдера добавляется ещё прелоадер.

А нужно было бы оптимизировать картинки слайдера. Например, посмотреть, реально ли нужно такое количество и такие размеры.
Потом посмотреть — может лучше пережать качество в jpg, немного потерять, но так чтоб не слишком заметно было бы.
Иногда так удается выиграть на каждой картинке в 5 раз.

Если всё же нужен прелоадер. Конечно, можно прикрутить его, надо использовать метод Для просмотра ссылки Войди или Зарегистрируйся
Но имхо ставить на слайдер его — неправильно.
Пока страница не загружена, не отработаны стили. Браузер «не знает», где отрисовать и в каком размере картинки.
И на странице будет «вертеться» десяток загрузочных колечек в совершенно разных местах.
Поэтому лучше поставить прелоадер на страницу в таких случаях.
Пример Для просмотра ссылки Войди или Зарегистрируйся
Ещё Для просмотра ссылки Войди или Зарегистрируйся

 

[volkinson]

Цитата с описания прелоадера:

То есть он делает ровно то же — не показывает, пока не будет загружено.
Но к объёму слайдера добавляется ещё прелоадер.

А нужно было бы оптимизировать картинки слайдера. Например, посмотреть, реально ли нужно такое количество и такие размеры.
Потом посмотреть — может лучше пережать качество в jpg, немного потерять, но так чтоб не слишком заметно было бы.
Иногда так удается выиграть на каждой картинке в 5 раз.

Если всё же нужен прелоадер. Конечно, можно прикрутить его, надо использовать метод Для просмотра ссылки Войди или Зарегистрируйся
Но имхо ставить на слайдер его — неправильно.
Пока страница не загружена, не отработаны стили. Браузер «не знает», где отрисовать и в каком размере картинки.
И на странице будет «вертеться» десяток загрузочных колечек в совершенно разных местах.
Поэтому лучше поставить прелоадер на страницу в таких случаях.
Пример Для просмотра ссылки Войди или Зарегистрируйся
Ещё Для просмотра ссылки Войди или Зарегистрируйся

Я думал про такой вариант: Сделать фиксед блок и поставить прелоадер на этот блок. В таком случае это не будет ломать сайт. Вопрос в том, как это сделать