При первой загрузке не работает слайдер jCarouselLite

Написала мне сегодня одна заказчица:

На сайте http://www.адрес-сайта.ru/ есть слайдер в шапке, он каким-то странным образом в первый заход на сайт не открывается (см. прикрепленный файл), стоит "обновить" страницу или перейти по любой ссылке внутри сайта, слайдер загружается (в браузерах хром и яндекс, в ие, как ни странно, работает). С чем это связано, не могу понять, перепроверила все сотни раз. Этот же слайдер один в один на другом сайте (https://адрес-другого-сайта.ru/) работает и такой проблемы не замечает.

Ну что ж, если есть проблема, надо её решать. Как вообще решаются такие задачи, связанные с неполадками на сайтах с фронтендом и javascript? Самый простой способ – это нажимаем «Посмотреть код» и выбираем вкладку «Console» (для хрома). Здесь смотрим, какие есть ошибки при выполнении кода js: в каких строках и файлах.

Но, в этот раз ошибки были некритичными и появлялись и при последующих загрузках страницы, так что дело явно было не в них. Что ж, попробуем зайти с другой стороны. Почему вообще может не работать скрипт в первый раз? Что нет при первой загрузке в браузере? Ответ очевиден: кук и кэша. Логично предположить, что слайдеру куки совсем ни к чему, а вот загрузка картинок может и нужна.

В одной своей статье я уже разбирал функции, с помощью которых можно дождаться загрузки как дерева страницы, так и всех изображений. Нам понадобится функция $(window).load. Таким образом первоначальный код:

$(function() {
$(".imageSlider .carousel").jCarouselLite({

Меняем на такой:

$(window).load(function() {          
$(".imageSlider .carousel").jCarouselLite({

Проверяем...



Все работает! Итак, слайдер jCarouselLite надо инициализировать после того, как загрузятся картинки для него. Так что просто делаем, чтобы инициализация дожидалась полной загрузки страницы с помощью $(window).load.

Если у вас есть какие-то проблемы с вашим сайтом, то вы всегда можете написать мне: за небольшую плату я все сделаю. Быстро и с гарантией.