Предварительная загрузка всех изображений на сайте с помощью JQuery или Javascript

Question

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

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

Спасибо!

Answer 1

Это мой прелоадер.Сначала показывать preloader, а когда вся страница загружена, скрыть preloader и показывать контент.Попробуйте это, это очень просто и легко изменить.Это ссылка на мой пост с демо и кодом (~ 1 Кб): Предварительная загрузка веб-сайта с использованием jquery

Answer 2

Вы имеете в виду загрузку группы изображений (например, галереи?).Если это так, то вы можете сделать это с помощью jQuery.Вы проверили плагин Image Loader?Похоже, что он будет делать то, что вы хотите:

http://www.staticvoid.info/imageLoader/

Было бы тривиально положить div поверх этого, прежде чем запустить его, а затем удалить его в полном объеме () обратный вызов.

Возможно, вы также захотите ознакомиться с этой темой SO, в которой также говорится о плагине (который будет вашим лучшим вариантом, IMO): JQuery ожидает загрузки страницы перед началом работыслайдшоу?

Answer 3

Вы можете отобразить заставку или экран загрузки во время загрузки страницы, а затем удалить этот экран, когда JQuery сообщит вам, что страница полностью загружена. Примерно так:

$(document).ready(function() {
  // add loader
});

$(window).load(function() {
    // remove loader
});

Answer 4

Это автоматически загрузит все изображения в CSS для вашего сайта: http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/

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