Skip to content

Commit

Permalink
feat: Add lazy load
Browse files Browse the repository at this point in the history
  • Loading branch information
@ktquez
ktquez committed Jun 6, 2020
1 parent 9403654 commit ac70f97
Show file tree
Hide file tree
Showing 3 changed files with 75 additions and 43 deletions.
41 changes: 5 additions & 36 deletions demo/src/App.vue
View file
Expand Up @@ -2,7 +2,8 @@
<div id="app">
<div id="nav">
<router-link to="/post/1">Post 1</router-link> |
<router-link to="/post/2">Post 2</router-link>
<router-link to="/post/2">Post 2</router-link> |
<a href="/post/3">Post (testing the lazy load disqus)</a>
</div>
<router-view/>
</div>
Expand All @@ -22,12 +23,13 @@ export default {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
max-width: 800px;
margin: 0 auto;
}
#nav {
padding: 30px;
padding: 30px 0;
}
#nav a {
Expand Down Expand Up @@ -56,43 +58,10 @@ export default {
width: 100%;
height: 4px;
}
@media (min-width: 600px) {
#nprogress .bar {
background: #fff;
}
}
#nprogress .peg {
display: block;
position: absolute;
right: 0px;
width: 100px;
height: 100%;
box-shadow: 0 0 10px #41b482;
opacity: 1;
transform: rotate(3deg) translate(0px, -4px);
}
#nprogress .spinner {
display: block;
position: fixed;
z-index: 1031;
top: 15px;
right: 15px;
}
#nprogress .spinner-icon {
width: 18px;
height: 18px;
box-sizing: border-box;
border: solid 2px transparent;
border-top-color: #41b482;
border-left-color: #41b482;
border-radius: 50%;
animation: nprogress-spinner 400ms linear infinite;
}
.nprogress-custom-parent {
overflow: hidden;
position: relative;
}
.nprogress-custom-parent #nprogress .spinner,
.nprogress-custom-parent #nprogress .bar {
position: absolute;
}
Expand Down
41 changes: 35 additions & 6 deletions demo/src/views/Post.vue
View file
@@ -1,12 +1,45 @@
<template>
<article>
<article class="container">
<h1>
{{ post.title }}
</h1>

<section>
<p>
{{ post.body }}
{{ post.body }}
</p>
</section>

<section v-show="$route.params.id === '3'">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis neque et tellus efficitur sagittis. Praesent volutpat dui sed vehicula tristique. Donec magna augue, scelerisque varius arcu et, ullamcorper faucibus arcu. Nam ut nisi tortor. Pellentesque vestibulum varius nisl, non ullamcorper leo laoreet id. Donec quis molestie purus. Nullam dignissim dignissim ex, id sollicitudin justo venenatis porttitor.
</p>
<p>
Pellentesque eget nisl scelerisque, ullamcorper eros iaculis, maximus risus. Suspendisse potenti. Maecenas id augue lacus. Integer eget imperdiet enim, vitae vehicula mi. Fusce sit amet facilisis neque. Maecenas condimentum at lectus eget rhoncus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
</p>
<p>
Ut hendrerit blandit justo, placerat suscipit odio porta id. Nulla blandit placerat elit, ac accumsan tortor interdum eu. Aenean id est non arcu aliquet ultrices ut sit amet nisi. Sed nibh augue, ultricies aliquam augue et, tempus finibus lacus. Integer quis risus sed enim malesuada sollicitudin eu ut metus. In vel consectetur nunc. Curabitur fermentum feugiat gravida. In hac habitasse platea dictumst. Fusce quis vulputate sem, sit amet euismod metus. Integer sit amet pretium leo. Nunc at pellentesque sapien, at gravida lorem. Pellentesque gravida leo lectus, et facilisis nulla finibus in. Donec nec bibendum justo. Nulla ac aliquet nibh, a volutpat sapien.
</p>
<p>
Ut elementum, metus id viverra malesuada, augue arcu ullamcorper urna, et varius neque mi sed lorem. Nam at mauris eu nibh suscipit cursus sit amet sed ipsum. Proin massa ligula, placerat vitae felis nec, finibus eleifend dui. Sed sodales velit aliquam nisi vehicula vehicula. Quisque id efficitur nibh, eu tempus felis. Donec aliquam imperdiet nisl. Pellentesque vel nulla a arcu elementum semper. Cras ut luctus diam. Nam interdum risus tempus massa ultrices, eu tincidunt metus pharetra. Ut blandit massa metus, ut fringilla tellus ultrices vel. Pellentesque non viverra est. Phasellus gravida ipsum eu tempus viverra. Duis sagittis volutpat auctor. Duis vehicula ipsum at enim ultrices semper. Donec consequat convallis quam, nec finibus leo dictum ac. Sed feugiat aliquam ornare.
</p>
<p>
Donec lacus enim, dictum at tempus eu, tristique nec est. Nullam porta leo et vestibulum rhoncus. In hac habitasse platea dictumst. In sodales ex nec turpis ultrices pretium. Suspendisse dapibus sem id laoreet pulvinar. Etiam elementum tellus eget lacus consectetur dignissim. Cras convallis quam nec pretium porta. Nam pretium aliquam eros. Donec dui orci, eleifend vitae dictum eget, finibus ut nunc. Maecenas quis lectus at neque luctus pretium. Curabitur tempus lacinia dictum. Quisque accumsan ex quis arcu sagittis sollicitudin. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla justo dui, malesuada eget felis ut, consectetur facilisis leo. Donec eget dictum purus.
</p>
<p>
Etiam non tortor at neque fermentum iaculis. Aenean eget volutpat augue. Suspendisse eu ligula id tortor facilisis venenatis at vitae nisi. Aenean porta porta enim eget auctor. Nam pretium sed sapien at aliquam. Aenean eleifend libero nec hendrerit blandit. Donec ac lectus aliquet, volutpat velit bibendum, ultricies lacus. Mauris ut nunc ut purus mattis porta. Donec feugiat libero ac tellus fermentum, eget sagittis sapien vehicula.
</p>
<p>
Vestibulum eget pulvinar nulla, cursus ullamcorper ex. Quisque et odio et enim dignissim ornare eu vitae nibh. Nam sed tincidunt dui, in dictum enim. Nam sodales enim id vestibulum sagittis. Nulla facilisi. Vestibulum commodo est et nisi cursus, et tincidunt massa iaculis. Pellentesque finibus mattis nibh, nec eleifend lacus viverra sit amet. Donec ligula leo, sagittis nec odio quis, ultrices scelerisque ante. Duis at iaculis mauris. Maecenas feugiat imperdiet faucibus. Donec a mi metus. Nam non turpis elementum, ornare nisi vitae, pulvinar velit.
</p>
<p>
Sed faucibus nunc arcu, eget volutpat lorem fermentum in. Nulla feugiat massa nisl, quis venenatis magna vulputate non. Donec a porta orci. Duis eleifend at diam vitae consequat. Proin volutpat vehicula justo, et pretium felis lacinia quis. Mauris nec tristique arcu, eu sagittis ante. Mauris vulputate massa sit amet nunc egestas mollis. Mauris volutpat vel risus id volutpat. Donec libero ante, laoreet vitae ornare vel, viverra non justo.
</p>
<p>
Phasellus ullamcorper arcu ac risus mollis consequat. Sed eu malesuada eros, vitae sodales odio. Curabitur tincidunt sapien sed tellus aliquam, porta dapibus ligula elementum. Sed turpis eros, ultrices sit amet metus cursus, tempor tincidunt metus. Proin eget justo non nisi accumsan volutpat. Phasellus ligula nibh, gravida vitae neque et, rhoncus laoreet turpis. Phasellus luctus volutpat nisi, non placerat dolor lobortis eu. Donec euismod ipsum sed interdum rhoncus. Pellentesque rhoncus nibh sit amet placerat commodo. Quisque ac rutrum turpis. Donec tincidunt diam ut porta feugiat.
</p>
<p>
Suspendisse justo turpis, rutrum vel velit eu, porta finibus augue. Morbi maximus sodales purus. Nulla sed laoreet sapien. Proin placerat ex sit amet neque aliquam gravida. Aenean finibus cursus turpis ut luctus. Suspendisse vitae gravida odio. Vestibulum elementum ex nec velit commodo tempor. Nulla a arcu mauris.
</p>
</section>

Expand Down Expand Up @@ -41,7 +74,3 @@ export default {
})
}
</script>

<style lang="scss" scoped>
</style>
36 changes: 35 additions & 1 deletion src/VueDisqus.vue
View file
Expand Up @@ -25,17 +25,33 @@ export default {
},
lang: {
type: String
},
lazy: {
type: Boolean,
default: true
},
lazyConfig: {
type: Object,
default: () => ({
root: null,
rootMargin: '200px',
threshold: 0.5
})
}
},
data: () => ({
observer: null
}),
watch: {
lang () {
this.reset()
}
},
mounted () {
if (window.DISQUS) return this.reset()
if (this.lazy) return this.observerDisqus()
this.init()
},
Expand All @@ -51,6 +67,7 @@ export default {
},
init () {
if (window.DISQUS) return this.reset()
const setBaseConfig = this.setBaseConfig
window.disqus_config = function () {
setBaseConfig(this)
Expand All @@ -59,6 +76,23 @@ export default {
if (this.$route) this.$watch('$route.path', () => this.reset())
},
observerDisqus () {
if ('IntersectionObserver' in window) {
this.observer = new IntersectionObserver(this.handleObserver, this.lazyConfig)
return this.observer.observe(this.$el)
}
this.init()
},
handleObserver (entries) {
entries.forEach(entry => {
if (entry.isIntersecting) {
this.observer.disconnect()
this.init()
}
})
},
makeEmbedScript () {
setTimeout(() => {
const d = document
Expand Down

0 comments on commit ac70f97

Please sign in to comment.