0

https://codepen.io/wfedoruk/pen/PopbyBw

Несмотря на то, что рендеринг очень быстрый, по условию задачи необходим прелоадер, который должен работать без использования setTimeout и setInterval.

document.addEventListener('DOMContentLoaded', function() {

  document.getElementById('create').addEventListener('click', makeBlock);

  var data
  var step = 3
  var item = 3

  function Block(a, b, c, d, e) {
    this.heading = a;
    this.text = b;
    this.link = c;
    this.image = d;

    this.form = function() {
      document.getElementById('blocks').insertAdjacentHTML('afterbegin', e);
      document.querySelector('.heading_inner').innerHTML = a;
      document.querySelector('.text_inner').innerHTML = b;
      document.getElementById('myLink').href = c;
      document.getElementById('image').src = d;
    }

  }

  function makeBlock() {
    var heading = document.getElementById('heading').value;
    var text = document.getElementById('text').value;
    var link = document.getElementById('link').value;
    var image = document.getElementById('image').files[0];
    var blockForm = '<div class="block"><a id = "myLink" href = ""><div class="link"><div  class="image_inner"><img id= "image" src="" alt=""></div><div class="heading_inner"></div><div class="text_inner"></div>';

    if (heading < 1 || text < 1 || document.getElementById('image').value < 1) {
      alert("добавьте данные");
    } else if (!heading.match(/^[а-яА-яёЁіІ ]+$/) || !text.match(/^[а-яА-яёЁіІ ]+$/)) {
      alert("используйте кириллицу");
    } else {
      var block = new Block(heading, text, link, image, blockForm);
      block.form();
      Clear('input');
      Clear('textarea');



      data = Array.from(document.querySelectorAll('.blocks .block'));

      data.slice(item).forEach(e => e.style.display = 'none');

      if (data.length > item)
        document.querySelector('.more').style.display = 'block';

    }


  }

  document.querySelector('.more').addEventListener('click', function(e) {

    let tmp = data.slice(item, item + step);
    tmp.forEach(e => e.style.display = 'block');
    item += step;
    if (item > data.length)
      this.style.display = 'none';

  });

  function Clear(id) {
    document.querySelectorAll(id).forEach(function(item) {
      item.value = "";
    });
    document.querySelector("label").style.backgroundImage = "";
  }

  document.getElementById('image').addEventListener("change", function() {
    if (this.files[0]) {
      var fr = new FileReader();

      fr.addEventListener("load", function() {
        document.querySelector("label").style.backgroundImage = "url(" + fr.result + ")";
      }, false);

      fr.readAsDataURL(this.files[0]);
    }
  });

});
<div class="container ">
  <div class="input_block">
    <div class="image_input">
      <label>
                            Картинка
                        <input 
                        id="image"
                        type="file" 
                        class="input_image" 
                        placeholder="Картинка" 
                        accept="image/*">
                    </div>
                  </label>



      <div class="text_input">
        <div>
          <input id="heading" class="text" type="text" required placeholder="Заголовок" title="Только кириллица не более 20 символов" pattern="^[А-Яа-яЁёІі\s]+$" maxlength="20">
        </div>
        <div>
          <input id="link" type="url" placeholder="Ссылка">
        </div>
        <div>
          <textarea id="text" class="text" title="Только кириллица не более 250 символов" maxlength="250"></textarea>
        </div>
        <div class="add">
          <button id="create" type="button">
                              Создать
                          </button>
        </div>
      </div>
    </div>
    <div class="more">
      <button id="more"> 
                  Просмотреть еще
                </button>
    </div>
    <div class="render">
      <div class="preloader">
        <div class="logo">
          <p>Пожалуйста, подождите</p>
        </div>
      </div>

      <div class="blocks" id="blocks">
        <!-- <div class="block">
                    <a href = "">
                      <div class="link">
                      
                        <div class="image_inner">
                          <img src="" alt="">
                        </div>
                        <div class="heading_inner">
                          
                        </div>
                        <div class="text_inner">
                          
                        </div>
                      </div>
                    </a>  
                  </div>  -->
      </div>
    </div>



  </div>

4
  • Что? Куда? Зачем? Ничего не понятно! 20 мая 2021 в 5:12
  • добавил верстку, по условию задачи во время рендеринга блоков должен появиться прелоадер который будет исчезать после каждого рендеринга. Зачем, не спрашивайте ))
    – Vitaliy
    20 мая 2021 в 6:11
  • В данном примере невозможно показывать лоадер, потому что в функции makeBlock -синхронный код. Это не имеет смысла. Можно сделать там код асинхронным и добавить какие-нибудь задержки, но зачем (все равно спросил (: )? 21 мая 2021 в 4:59
  • спасибо, уяснил для себя
    – Vitaliy
    31 мая 2021 в 8:37

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Посмотрите другие вопросы с метками или задайте свой вопрос.