Skip to content

Instantly share code, notes, and snippets.

@jdcauley

jdcauley/sample.js

Created Mar 31, 2020
Embed
What would you like to do?
Lazy Load JS groups with IO
// Sample from Trellis
import { loadImages } from './helpers/lazyload'
const boot = () => {
const bodyTag = document.getElementsByTagName('body')[0];
bodyTag.className = bodyTag.className.replace(/\bmvt-no-js\b/,'mvt-js')
const insertLegacyScript = () => {
const legacyTag = document.createElement('script')
legacyTag.src = `${window.mvt.theme_directory}/assets/dist/legacy.${window.mvt.version}.js`
legacyTag.type = 'text/javascript'
document.body.appendChild(legacyTag)
}
if (typeof Promise !== 'function') {
insertLegacyScript()
return
}
require( './helpers/nav.js' )
require( './helpers/search.js' )
__webpack_public_path__ = `${window.mvt.theme_directory}/assets/dist/`
const watchComments = () => {
const commentDiv = document.getElementById('mv-trellis-comments')
if (commentDiv) {
const observerConfig = {
rootMargin: `150px 0px 150px 0px`,
threshold: 0
}
const observer = new IntersectionObserver((entries, self) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
import(/* webpackChunkName: "loadComments" */'./apps/comments').then(
(loadComments) => {}
)
self.disconnect()
}
})
}, observerConfig)
observer.observe(commentDiv)
}
}
if (! 'IntersectionObserver' in window ) {
import(/* webpackChunkName: "IO" */'intersection-observer').then(
(IO) => {
loadImages()
watchComments()
}
)
} else {
loadImages()
watchComments()
}
if ( 'serviceWorker' in navigator ) {
import(/* webpackChunkName: "sw" */'./helpers/register-sw').then(module => {
})
}
}
boot()
// Sample from Create
// Inside the init function we also have a method that will load the style sheet for Create,
// so those styles aren't loaded and parsed until the create card is about to enter the viewport.
if (window.IntersectionObserver) {
const observer = new IntersectionObserver(((entries, self) => {
// Get cards in current intersection
const visibleCards = entries.filter(card => card.isIntersecting)
// For each card, initialize and unobserve
visibleCards.forEach(({ target }) => {
window.mvCreate.init(target)
self.unobserve(target)
})
}))
// Get all cards and observe theme
const cards = Array.from(document.getElementsByClassName('mv-create-card'))
cards.forEach(card => observer.observe(card))
const reviewsObserver = new IntersectionObserver(((entries, self) => {
const items = entries.filter(item => item.isIntersecting)
// For each card, initialize and unobserve
items.forEach(({ target }) => {
if (!window.MV_REVIEWS_INIT) {
window.MV_REVIEWS_INIT = true
import(/* webpackChunkName: "mv-reviews" */ './Reviews').then(
(module) => {
module.default()
}
)
}
self.unobserve(target)
})
}))
const reviewsId = window.MV_CREATE_SETTINGS.__REVIEWS_DIV__ // eslint-disable-line
const reviewsRoot = reviewsId && document.querySelector(reviewsId)
if (reviewsRoot) {
reviewsObserver.observe(reviewsRoot)
}
} else {
const delayListener = () => {
window.mvCreate.init()
document.removeEventListener('scroll', delayListener, false)
}
document.addEventListener('scroll', delayListener, {passive: true})
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment