Предотвращение загрузки слайдера изображения всех его изображений

Question

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

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

Есть ли способ сделать изображение ползунка загруженным последним?

Answer 1

Я не знаю, каким образом CSS может решить эту проблему. Если у вас есть доступ к Javascript, становится намного легче решить.

1. Используйте изображение баннера облегченный по умолчанию: Что-то, что нагрузки очень быстро и действует как заполнитель для слайдера изображений во время их загрузки.

2. Javascript onload: Используйте Javascript, чтобы начать замену изображений после полной визуализации страницы. У вас есть местозаполнитель, удостоверяющий, что макет все еще выглядит хорошо (без затирания шрифта или сломанной компоновки из-за отсутствия загруженного изображения), который аккуратно подменяется, когда изображение готово.

Нет блокировки визуализации, не испорчена макета. Дополнительные накладные расходы некоторых Javascript (второстепенных) и общего изображения баннера (должны быть незначительными, если они сильно оптимизированы).