Загружаемое сообщение

StackOverflow https://stackoverflow.com/questions/1031150

  •  06-07-2019
  •  | 
  •  

Вопрос

Ищу 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.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top