Вопрос
Ищу js-скрипт, который покажет некоторые Сообщение (что-то вроде "Загрузка, пожалуйста, подождите") до тех пор, пока на страницу не будут загружены все изображения.
Важный - он не должен использовать какой-либо фреймворк js (jquery, mootools и т.д.), должен быть обычным js-скриптом.
Сообщение должно исчезнуть при загрузке страницы.
Решение
Да, вопрос старой школы!Это восходит к тем временам, когда мы использовали предварительную загрузку изображений...
В любом случае, вот немного кода.Волшебство - это свойство "complete" в коллекции document.images (объекты изображений).
// setup a timer, adjust the 200 to some other milliseconds if desired
var _timer = setInterval("imgloaded()",200);
function imgloaded() {
// assume they're all loaded
var loaded = true;
// test all images for "complete" property
for(var i = 0, len = document.images.length; i < len; i++) {
if(!document.images[i].complete) { loaded = false; break; }
}
// if loaded is still true, change the HTML
if(loaded) {
document.getElementById("msg").innerHTML = "Done.";
// clear the timer
clearInterval(_timer);
}
};
Конечно, это предполагает, что у вас где-то есть какой-то DIV:
<div id="msg">Loading...</div>
Другие советы
Просто добавьте статический <div>
на страницу, информируя пользователя о том, что страница загружается.Затем добавьте window.onload
обработчик и удалите div.
Кстати, в чем причина этого?Разве у пользователей уже нет индикаторов загрузки страниц в их браузерах?
Вы должны выполнять асинхронные ajax-запросы для изображений и добавлять обратный вызов, когда он будет завершен.
Вот некоторый код, иллюстрирующий это:
var R = new XMLHttpRequest();
R.onreadystatechange = function() {
if (R.readyState == 4) {
// Do something with R.responseXML/Text ...
stopWaiting();
}
};
Теоретически у вас могло бы быть событие onload для каждого объекта image, которое запускает функцию, проверяющую, загружены ли все изображения.Таким образом, вам не нужен setTimeout().Однако это привело бы к сбою, если бы изображение не загрузилось, поэтому вам также пришлось бы учитывать onerror.