Как я могу получить разные разделы / коробки / изображения моего сайта для одновременной загрузки?

Question

У меня есть сайт, который разделен на 3 ключевых раздела, вставки A, B и C.

Вставка A содержит большое изображение.Блок B содержит 6 миниатюр меньших изображений.Блок C содержит изображение среднего размера.

Если пользователь щелкает изображение в блоке A, в блок A загружается другое изображение, в то время как блок B перезагружается с 6 новыми случайными миниатюрами, а блок Cтеперь содержит уменьшенную версию предыдущего изображения в блоке A.

В настоящее время изображения в этих боксах загружаются с разным временем / скоростью, что делает UX выглядящим неловко (то есть Box C может загружаться до B, а Bперед).Как я могу гарантировать, что все изображения загружаются в в одно и то же время (по сути, убедитесь, что все изображения загружаются в то же время, что и последнее изображение загружается)?

Answer 1

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

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