Могу ли я спокойно загружать javascript или файлы изображений в фоновом режиме?

Мое приложение имеет очень простую главную страницу, которая служит шлюзом входа в систему. Сначала пользователи должны перейти на эту страницу. На странице нет jQuery, очень маленький файл JavaScript и небольшой файл CSS. Он быстро загружается.

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

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

2
@epascarello: .live ? Я думаю, вы имеете в виду .on .
добавлено автор Rocket Hazmat, источник
@epascarello: Ой. Я указал на свой комментарий не того человека. Это должно было быть к cggaurav. >.>
добавлено автор Rocket Hazmat, источник
@cggaurav Сообщать плакату использовать .live ()? Вы прочитали вопрос!
добавлено автор epascarello, источник
@RocketHazmat, я повторял то, что имел cggaurav, прежде чем он отредактировал свой комментарий к чему-то немного лучше.
добавлено автор epascarello, источник
@cggaurav нет такого события, как «live». Вы имели в виду «фокус»?
добавлено автор Pointy, источник
Ищите событие .on на вход входа и выберете нужные вам ресурсы?
добавлено автор cggaurav, источник
@Melina - пожалуйста, отправьте свой ответ или ответьте на один из ответов! Благодарю.
добавлено автор Salvatore Giacinto, источник

5 ответы

Загрузка изображений может быть выполнена следующим образом:

var img = new Image();
img.onload = function() {
     //image loaded
};
img.src = "image.png";
1
добавлено

Это можно сделать, поместив путь изображения в ваш класс CSS. Таким образом, загрузка CSS-класса также будет загружать изображения. Аналогичным образом вы можете предварительно загружать изображения, используя javascript.

Ниже приведен образец фрагмента из моего проекта; здесь изображения загружаются с помощью jquery. Вы можете сделать то же самое в чистом javascript.

  loadImages : function(){
    this.picBaseUrl = BASE_URL + this.id + '/';  //base path for all images
    $('#p1').attr('src', this.picBaseUrl + '1.jpg');
    $('#p2').attr('src', this.picBaseUrl + '2.jpg');
    $('#p3').attr('src', this.picBaseUrl + '3.jpg');
    $('#p4').attr('src', this.picBaseUrl + '4.jpg');
    $('#p5').attr('src', this.picBaseUrl + '5.jpg');
}

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

1
добавлено

in the < head >:

<script src='' id="s1" type="text/javascript"></script>

в конце вашей страницы:

<script type="text/javascript">
var s1 = document.getElementById("s1");
s1.src= "myJavaScript.js";
</script>
</body>

you can load all your resourses in the myJavaScript.js and they will be loaded AFTER your page has been complitely loaded.

0
добавлено

Без JQuery, я думаю, используя событие onload для тега body. так что-то вроде (непроверенный):

<script>
function preLoad() {

document.getElementById("img1").src = "/images/image1toPreload.png";
document.getElementById("img2").src = "/images/image2toPreload.png";
document.getElementById("img3").src = "/images/image3toPreload.png";
}
</script>

...

<body onload="preLoad()">

your content here
...




0
добавлено

Создайте n div на вашей странице, 1 для каждого кэшированного изображения, затем определите CSS для них.

#Div1 {
background: url(path/cachedImage1.png) no-repeat;
display: none;
}
#Div2 {
background: url(path/cachedImage2.png) no-repeat;
display: none;
}
#Div3 {
background: url(path/cachedImage3.png) no-repeat;
display: none;
}
0
добавлено
JavaScript Jobs — чат
JavaScript Jobs — чат
8 336 участник(ов)

JavaScript Jobs — чат для поиска работы и людей Правила оформления: https://teletype.in/@telegram-ru/r1WQe5F1m См. также: @mobile_jobs, @devops_jobs, @nodejs_jobs, @react_js, @angular_ru, @js_ru

JavaScript.ru
JavaScript.ru
7 932 участник(ов)

Сообщество сайта JavaScript.ru в Slack.

pro.js
pro.js
4 675 участник(ов)

Про JavaScript и NodeJS Invite: https://t.me/joinchat/Be4rsT5Rsgq30DHutjxXgA Правила: http://telegra.ph/ru-chat-rules-06-19 Вакансии только с ЗП, не чаще раза в неделю.

JavaScript — русскоговорящее сообщество
JavaScript — русскоговорящее сообщество
3 269 участник(ов)

Рекомендуем сразу отключить уведомления Правила: https://rudevs.network/ByaMH6un7 См. также: @js_noobs_ru, @nodejs_ru, @typescript_ru, @react_js, @electron_ru Вакансии и поиск работы: @javascript_jobs

JavaScript Noobs — сообщество новичков
JavaScript Noobs — сообщество новичков
2 484 участник(ов)

Чат для новичков

javascript_ru
javascript_ru
915 участник(ов)

Сообщество любителей самого популярного языка программирования в мире. Чат основан в 2009 году. Логи: https://goo.gl/9EOeM7 Поддержка бота: @chat_linker (ссылка на репу внутри) Вам будут интересны @frontend_ru и @css_ru

jsChat
jsChat
603 участник(ов)

Чат посвященный программированию на языке javaScript Перед отправкой ссылки на Ваш контент посоветуйтесь с админом Все ссылки удаляются ботом автоматически

JavaScript for Zombies Chat
JavaScript for Zombies Chat
492 участник(ов)

Чат про JavaScript для настоящих zombie! Вход строго по приглашениям! Ссылка для строгих приглашений: https://t.me/joinchat/AAMBHz3Uyr0tuZ7VaB029g

All That JS
All That JS
417 участник(ов)

JS на русском