javascript Lazy Loading de Requests com Axios

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript Lazy Loading de Requests com Axios相关的知识,希望对你有一定的参考价值。

import axios from "axios";

export default function resultadosLazyLoad() {
  const resultados = document.querySelector(".resultados__container") || "";

  if (resultados) {
    const resultadosContainer = resultados.querySelector(".featured-girls__list") || "";
    let page = 1;
    let limit = 8;
    let loadInterval = null;
    let maxRequests;
    const loaderMarkup = `<div class="loader"><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" style="transform-origin: 50px 50px 0px;" xml:space="preserve">
                        <g style="transform-origin: 50px 50px 0px;">
                            <g style="transform-origin: 50px 50px 0px; transform: scale(0.37);">
                                <g style="transform-origin: 50px 50px 0px; animation-duration: 1.2s; animation-delay: -1.2s; animation-direction: normal;" class="">
                                    <g>
                                        <g class="ld ld-pulse" style="transform-origin: 50px 50px 0px; animation-duration: 1.6s; animation-delay: -1.46667s; animation-direction: normal;">
                                            <path id="XMLID_910_" class="st1" d="M50,74.07c-0.53,0-1.061-0.213-1.451-0.638L15.388,47.59H9.472 c-1.713,0-2.608,2.036-1.451,3.298l40.528,33.877c0.39,0.425,0.92,0.638,1.451,0.638c0.53,0,1.061-0.213,1.451-0.638l40.528-33.877 c1.157-1.262,0.262-3.298-1.451-3.298h-5.916L51.451,73.432C51.061,73.857,50.53,74.07,50,74.07z" fill="#bba962" style="fill: rgb(187, 169, 98);"></path>
                                        </g>
                                        <g class="ld ld-pulse" style="transform-origin: 50px 50px 0px; animation-duration: 1.6s; animation-delay: -1.33333s; animation-direction: normal;">
                                            <path id="XMLID_909_" class="st2" d="M50,41.077c-0.53,0-1.061-0.213-1.451-0.638L15.388,14.597H9.472 c-1.713,0-2.608,2.036-1.451,3.298l40.528,33.877c0.39,0.425,0.92,0.638,1.451,0.638c0.53,0,1.061-0.213,1.451-0.638l40.528-33.877 c1.157-1.262,0.262-3.298-1.451-3.298h-5.916L51.451,40.439C51.061,40.864,50.53,41.077,50,41.077z" fill="#d4b63e" style="fill: rgb(212, 182, 62);"></path>
                                        </g>
                                        <metadata xmlns:d="https://loading.io/stock/" class="ld ld-pulse" style="transform-origin: 50px 50px 0px; animation-duration: 1.6s; animation-delay: -1.2s; animation-direction: normal;">
                                            <d:name class="ld ld-pulse" style="transform-origin: 50px 50px 0px; animation-duration: 1.6s; animation-delay: -1.06667s; animation-direction: normal;">down</d:name>
                                            <d:tags class="ld ld-pulse" style="transform-origin: 50px 50px 0px; animation-duration: 1.6s; animation-delay: -0.933333s; animation-direction: normal;">south,download,bottom,direction,way,dart,chevron,down,arrow</d:tags>
                                            <d:license class="ld ld-pulse" style="transform-origin: 50px 50px 0px; animation-duration: 1.6s; animation-delay: -0.8s; animation-direction: normal;">cc-by</d:license>
                                            <d:slug class="ld ld-pulse" style="transform-origin: 50px 50px 0px; animation-duration: 1.6s; animation-delay: -0.666667s; animation-direction: normal;">ia99jj</d:slug>
                                        </metadata>
                                    </g>
                                </g>
                            </g>
                        </g>
                    </svg>
                </div>`;

    function template(response) {
      return `<div class="card-highlight">
          <a href="${response.link}" title="" class="card-highlight__link">
              <figure class="card-highlight__thumb">
                  <img src="${response.url}" alt="" class="lazy">
              </figure>
              <h3 class="card-highlight__name">${response.name}</h3>
          </a>
          <a href="${response.link}" title="" class="card-highlight__phone"><i class="fa fa-whatsapp"></i> ${response.fone}</a>
      </div>`;
    };

    function pageLimit(limit) {
      return axios.get(`https://api-chat-mock.herokuapp.com/imagens`)
        .then(function (response) {
          return Math.round(response.data.length / limit);
        })
        .catch(function (error) {
          console.log(error);
        })
    }

    function loadMore(page, limit) {
      loader();
      axios.get(`https://api-chat-mock.herokuapp.com/imagens?_page=${page}&_limit=${limit}`)
        .then(function (response) {
          response.data.forEach(el => {
            resultadosContainer.innerHTML += template(el)
          });
          loader();
        })
        .catch(function (error) {
          loader();
        })
    }

    function loader() {
      const target = document.querySelector(".loader") || '';
      target ? target.parentNode.removeChild(target) : resultadosContainer.innerHTML += loaderMarkup;
    }
    pageLimit(limit)
      .then((res) => maxRequests = res);

    window.addEventListener('scroll', function () {
      let bottomOfContainer = document.documentElement.scrollTop > resultados.offsetHeight / 1.35;

      if (bottomOfContainer) {
        if (loadInterval === null) {
          if (page <= maxRequests) {
            loadMore(page, limit);
            ++page;
            loadInterval = setTimeout(function () {
              loadInterval = null;
            }, 5000);
          }
        }

      }

    });

    loadMore(page, limit);
    ++page;
  }

}
// Animate Loader

.loader {
    width: 100%;
    height: 100px;

    svg {
        width: 125px;
        margin: 0 auto;
        display: block;
    }
}


path,
ellipse,
circle,
rect,
polygon,
polyline,
line {
    stroke-width: 0;
}

.st0 {
    fill: #999998;
}

.st1 {
    fill: #323232;
}

.st2 {
    fill: #CCCCCB;
}

.st3 {
    fill: #ACBD81;
}

.st4 {
    fill: #849B87;
}
@keyframes ld-pulse {
    0% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

    50% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }

    51% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

    100% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }
}

@-webkit-keyframes ld-pulse {
    0% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

    50% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }

    51% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

    100% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
    }
}

.ld.ld-pulse {
    -webkit-animation: ld-pulse 0.8s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
    animation: ld-pulse 0.8s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
}
<div class="container">
    <section class="box-temp mb-medium">
        <header class="header-comp t-center">
            <h2 class="header-comp__title">
                Resultados de Busca
            </h2>
        </header>
        <div class="resultados__container">
            <div class="featured-girls__list">
               
                
            </div>
        </div>
    </section>
</div>
import resultadosLazyLoad from './pages/resultados-busca';


document.addEventListener('DOMContentLoaded', () => {
  resultadosLazyLoad();
});

以上是关于javascript Lazy Loading de Requests com Axios的主要内容,如果未能解决你的问题,请参考以下文章

实现类似微信Viewpager-Fragment的惰性加载,lazy-loading

C# Lazy Loading

实现对象属性的lazy-loading(延迟加载)

[Angular] Show a Loading Indicator for Lazy Routes in Angular

React Hooks: Lazy Loading Breaks useLayoutEffect?

在Shell中实现延迟加载(Lazy Loading)