felvieira
12/20/2018 - 2:19 AM
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();
});