Разрешить HTML продолжать только после загрузки всех изображений - PullRequest
Новая
       6

Разрешить HTML продолжать только после загрузки всех изображений

0 голосов
/ 07 ноября 2019

Я переработал много кода из старого проекта JS, который сделал в самом начале процесса обучения, и тогда я ничего не знал о событиях DOM. Именно в этом случае onload. Что-то, что я ищу, так или иначе, чтобы позволить веб-сайту начать работать только после загрузки всех изображений, не помещая все в одну большую onload функцию или не переписывая весь мой код. Есть ли в любом случае, чтобы сделать это? 

<img src="placeholder.png" onload="continue()" width="100" height="100">
<script>
   function continue() {
      //This is where I am stuck
   }
</script>

Ответы [ 2 ]

3 голосов
/ 07 ноября 2019

Самое простое решение - установить для свойства display тела значение none при загрузке страницы, а затем сделать continue() видимым.

CSS: 

body {
    display: none;
}

JS: 

function continue() {
    document.body.style.display = "";
}
0 голосов
/ 07 ноября 2019

Если изображения не будут динамически добавляться в DOM, вы можете просто сделать следующее. Если изображения не будут динамически добавляться в DOM, вы можете просто сделать следующее 

<html>
<body style="display: none;">
  <img src="https://via.placeholder.com/100" alt="">
  <img src="https://via.placeholder.com/200" alt="">
  <img src="https://via.placeholder.com/300" alt="">
  <script>
    const imageCollection = Array.from(document.getElementsByTagName('img'));
    const promisifier = (imageNode) => {
      return new Promise((resolve, reject) => {
        imageNode.addEventListener("load", () => {
          console.log('image loaded', imageNode);
          resolve('Loaded')
          });
      })
    }

    Promise.all(imageCollection.map(img => promisifier(img))).then((resp)=>{
      document.body.style.display = 'block';
      console.log('All images completed Loading');
    })
  </script>
</body>
</html>

Если изображения будут добавляться динамически, вы можете обратиться к Mutation Observer, дайте мне знать, если это тоже добавит это.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...