fetch() и подгрузка постов из JSON

172

26 августа 2018, 21:50

Я хочу динамически подгружать по 10 постов пролистывая ленту. Я понимаю, что нужно это повесить на scroll. Но боже я ума не приложу, как это сделать? Буду благодарен даже если подскажите, где почитать по этому поводу, а то я вообще ни бум бум.

window.onload = () => {
    fetch("https://api.myjson.com/bins/152f9j")
            .then((response) => {
                response.json().then((data) => {
                    const monthNames = ["January", "February", "March", "April", "May", "June","July", "August", "September", "October", "November", "December"];               
                let imgCont = document.getElementById("img-container");
            for (let i = 0; i < 10; i++) {
                let dateTMP = new Date(`${data.data[i].createdAt}`);
                let postWrp = document.createElement("div");
                postWrp.classList.add("post-wrp");
                postWrp.innerHTML = `<div id="img-container">
    <div class="title-wrp">${data.data[i].title}</div>
    <div class="post-and-image">
      <img src="${data.data[i].image}">
      <div class="description-wrp">${data.data[i].description}
    </div>

  </div>
  <div class="footer-row">
        <div class="time-wrp">${dateTMP.getDate()} ${monthNames[dateTMP.getMonth()]} ${dateTMP.getHours()}:${dateTMP.getMinutes()}</div>
        <div class="tags-wrp">${data.data[i].tags}</div>
    </div>` 
                document.body.appendChild(postWrp);
            }
        });
    })
    .catch((err) => {
        console.log(err);
    })}

Answer 1

хочу динамически подгружать по 10 постов пролистывая ленту. Я понимаю,что нужно это повесить на scroll.

Для этого примера взято 5 первых элементов, остальные добавляются/подгружаются в body по мере прокрутки. Вы можете поменять, на число которое вам больше нравиться, только не забудьте, если элементов всего 10, прокручивать для подгрузки будет нечего.

window.onload = () => { 
  var ar = [] // Массив для отложенной загрузки 
  fetch("https://api.myjson.com/bins/152f9j", { 
      mode: 'cors' 
    }) 
    .then((response) => { 
      response.json().then((data) => { 
 
        const monthNames = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; 
        let imgCont = document.getElementById("img-container"); 
        for (let i = 0; i < 10; i++) { 
          let dateTMP = new Date(`${data.data[i].createdAt}`); 
          let postWrp = document.createElement("div"); 
          postWrp.classList.add("post-wrp"); 
 
          postWrp.innerHTML = `<div id="img-container"> 
    <div class="title-wrp">${data.data[i].title}</div> 
    <div class="post-and-image"> 
      <img src="${data.data[i].image}"> 
      <div class="description-wrp">${data.data[i].description} 
    </div> 
 
 
  </div> 
  <div class="footer-row"> 
        <div class="time-wrp">${dateTMP.getDate()} ${monthNames[dateTMP.getMonth()]} ${dateTMP.getHours()}:${dateTMP.getMinutes()}</div> 
        <div class="tags-wrp">${data.data[i].tags}</div> 
    </div>` 
 
          if (i >= 5) { // <---- Отложенный показ, если надо поменять кол-во элементов 
            ar.push(postWrp) 
          } else { // Первые 5 элементов подружаются сразу 
            document.body.appendChild(postWrp); 
          } 
        } 
 
      }); 
    }) 
    .catch((err) => { 
      console.log(err); 
    }) 
  //---------------------------------------------------------------- 
  // На вешаем событие на scroll body 
  document.querySelector('body').onscroll = function(e) { 
    let b = document.body 
    if (this.scrollY >= b.scrollHeight / 2) { // Половина и более экрана прокрученно 
      if (this.scrollY % 100 && ar.length) { // Подгружает если в массиве есть элементы 
 
        b.appendChild(ar.shift()); // Добавляет элемент 
      } 
    } 
 
  }; 
 
}