Загрузка GIF (Preloader )зависает только в Chrome

У меня есть галерея на моем сайте. Галерея содержит 15 изображений, каждое из них весит около 500 КБ (общий размер 7,5 МБ ).

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

Я хочу, чтобы посетитель увидел загрузочный GIF, как только он зайдет на страницу галереи,пока изображения галереи не будут загружены и готовы к просмотру.

Вот что я сделал для достижения своей цели:

Это начало тела HTML-страницы галереи :

. А это CSS-часть галереи:

#gallery {
  background: url(images/ajax-loader.gif);
  background-repeat:no-repeat;
  background-attachment: fixed;
  background-position: center; 

Таким образом, загрузочный GIF следует загружать, как только посетитель заходит на страницу галереи, потому что это первый объект внутри , который будет загружен. Однако его не видно из-за класса hiddenPic.

Этот метод должен помочь сделать загружаемый GIF готовым и видимым в качестве фона галереи как можно скорее, пока все изображения галереи не будут загружены и галерея не будет готова.

Однако загружаемый GIF-файл не работает должным образом в Google Chrome; он отлично работает в Firefox и IE (работает без нареканий)-но застревает (не вращается должным образом )в Chrome, с момента его появления до готовности галереи.

Обновление:Я знаю, что могу реализовать лучшую галерею (, подобную предложенной в комментариях ), которая потребует от пользователя меньше ресурсов при входе на страницу галереи -, но я не понимаю, как это может быть причиной проблема, когда загрузчик GIF отлично работает в Firefox и IE.

Почему загрузка GIF Ajax не работает должным образом в Chrome?