Техническое задание.

При медленном (мобильном) интернете наблюдаются прыжки элементов страницы, которые приводят к некрасивому отображению страницы на мобильных устройствах.  При загрузке страницы картинки слайдера слазят вниз и все прыгает…

Вот здесь запись загрузки… 

 

Необходимо это исправить.

Рещение задачи:

При детальном изучении процесса загрузки страницы с использованием возможностей инструмента Network комплекса Dev-tools от GoogleCrome выяснилось, что неправильное отображение элементов страницы обусловлено поздним подключением файлов стилей, а также поздней инициализацией нескольких slick-слайдеров ( http://github.com/kenwheeler/slick ).

Было принято решение вынести часть CSS классов, ответственных за отображение критических(прыгающих) элементов в отдельный файл, и подключать этот файл как можно ранее. Данный код приводить нет смысла, т.к. у всех он разный…

Некорректную работу slick-слайдеров решили следующим образом — блок слайдера изначально скрываем при помощи стилей, и только после полной инициализации данного слайдера отображаем его.

 

//Slick slider
// Главная
$('.banners').on('init', function(slick){ //показываем основной слайдер только после полной инициализации
  $('.slider-desctop').removeClass('hide');
  $('.slider-mobile').removeClass('hide');
});
$('.topsales').on('init', function(slick){ //показываем слайдер топ продаж только после полной инициализации
  setTimeout(function() { //на всякий случай
    $('.top-s-slider-block').removeClass('opacity_0');
  }, 2000);
});
// Страница товара
$('.product-full').on('init', function(slick){ //показываем основной слайдер на карте товара только после полной инициализации
  console.log('product-full init');
  $('.product-full').removeClass('hide');
  $('.product-thumb-slider').removeClass('hide');
});

 

Заказчик остался доволен.