Vue.js Lazy Loading

Developer
Kyle Brumm
Size
3,620 Kb
Views
10,120
  1. Vue.js Lazy Loading Previews
  2. Vue.js Lazy Loading HTML Codes
  3. Vue.js Lazy Loading CSS Codes
  4. Vue.js Lazy Loading JS Codes

How do I make an vue.js lazy loading?

What is a vue.js lazy loading? How do you make a vue.js lazy loading? This script and codes were developed by Kyle Brumm on 07 January 2023, Saturday.

Vue.js Lazy Loading Previews
IQ Test

Vue.js Lazy Loading - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Vue.js Lazy Loading</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <main id="app"> <h1>News</h1> <section id="articles" class="section--articles"> <article class="article" v-for="(article, idx) in news" v-bind:key="article.title" v-bind:data-index="idx"> <div class="content"> <time class="date" :datetime="article.published">{{ article.published | formatDate }}</time> <div class="title">{{ article.title }}</div> </div> </article> <div id="loading" class="loading"><div class="loader"></div></div> </section>
</main> <script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.0.3/vue-resource.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Vue.js Lazy Loading - Script Codes CSS Codes

.article { padding: 2rem 1rem; border-top: 1px solid gray;
}
.article .date { font-size: 1rem;
}
.article .title { font-size: 2rem;
}
.loading { border-top: 1px solid gray;
}
.loader,
.loader:before,
.loader:after { border-radius: 50%; width: 2.5em; height: 2.5em; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation: loader 1.8s infinite ease-in-out; animation: loader 1.8s infinite ease-in-out;
}
.loader { color: gray; font-size: 10px; margin: 2rem auto 5rem; position: relative; text-indent: -9999em; -webkit-transform: translateZ(0); transform: translateZ(0); -webkit-animation-delay: -0.16s; animation-delay: -0.16s;
}
.loader:before,
.loader:after { content: ''; position: absolute; top: 0;
}
.loader:before { left: -3.5em; -webkit-animation-delay: -0.32s; animation-delay: -0.32s;
}
.loader:after { left: 3.5em;
}
@-webkit-keyframes loader { 0%, 80%, 100% { box-shadow: 0 2.5em 0 -1.3em; } 40% { box-shadow: 0 2.5em 0 0; }
}
@keyframes loader { 0%, 80%, 100% { box-shadow: 0 2.5em 0 -1.3em; } 40% { box-shadow: 0 2.5em 0 0; }
}

Vue.js Lazy Loading - Script Codes JS Codes

var inViewport = function(el, side) { var win = window; var viewport = { top : win.scrollY, left : win.scrollX }; viewport.right = viewport.left + win.outerWidth; viewport.bottom = viewport.top + win.outerHeight; var element = { top: el.offsetTop, left: el.offsetLeft }; element.right = element.left + el.offsetWidth; element.bottom = element.top + el.offsetHeight; switch (side) { case 'top': return (viewport.top <= element.top); break; case 'right': return (viewport.right >= element.right); break; case 'bottom': return (viewport.bottom >= element.bottom); break; case 'left': return (viewport.left <= element.left); break; default: return (!(viewport.right <= element.left || viewport.left >= element.right || viewport.bottom <= element.top || viewport.top >= element.bottom)); }
};
var newsUrl = "http://www.stellarbiotechnologies.com/media/press-releases/json";
var app = new Vue({ el: '#app', data: { news: [], limit: 10, offset: 0, scrollable: true }, ready: function() { console.log('ready'); this.fetchNews(); }, methods: { fetchNews: function() { this.scrollable = false; document.getElementById('loading').style.display = 'block'; this.$http.get(newsUrl + '?limit=' + this.limit + '&offset=' + this.offset).then(function(response) { // Get and save results var news = response.body.news; if (news.length > 0) { this.news = this.news.concat(news); } else { this.scrollable = false; document.getElementById('loading').style.display = 'none'; } }, function(error) { // Print error console.log(error) }).then(function() { this.offset += this.limit; this.scrollable = true; }); }, loadMore: function() { this.fetchNews(); }, }, filters: { formatDate: function(date) { var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; var newDate = new Date(date); return months[newDate.getMonth()] + ' ' + newDate.getDate() + ', ' + newDate.getFullYear(); } }
});
window.onload = function() { if (inViewport(document.getElementById('articles'), 'bottom') && app.scrollable) { app.fetchNews(); }
}
var timer;
window.onscroll = function() { if (inViewport(document.getElementById('articles'), 'bottom') && app.scrollable) { if(timer) { window.clearTimeout(timer); } timer = window.setTimeout(function() { app.fetchNews(); }, 500); }
}
Vue.js Lazy Loading - Script Codes
Vue.js Lazy Loading - Script Codes
Home Page Home
Developer Kyle Brumm
Username kjbrum
Uploaded January 07, 2023
Rating 3
Size 3,620 Kb
Views 10,120
Do you need developer help for Vue.js Lazy Loading?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kyle Brumm (kjbrum) Script Codes
Name
Subtle Menu Animation
CSS3 Stylish Checkboxes
CSS Only Dropdown
Dotted Menu Concept
Simple Accordion Concept
Line Button Hover Effects
3D Parallax Boxes
Wavy Loading Animations
Simple Tabs Concept
Stylish Brand Buttons
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!