Skip to content

Instantly share code, notes, and snippets.

@pbuzdin

pbuzdin/index.html

Created August 13, 2019 23:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pbuzdin/b546a0a37104def82071513c943df7aa to your computer and use it in GitHub Desktop.
Save pbuzdin/b546a0a37104def82071513c943df7aa to your computer and use it in GitHub Desktop.
Download ZIP
lazy load js // source https://jsbin.com/biyacok
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>lazy load js</title>
<style>
section {
height: 50vw;
border: 5vw dashed coral;
padding: 5vw
}
</style>
</head>
<body>
<section>
<h2>1</h2>
</section>
<section>
<h2>2</h2>
</section>
<section>
<h2>3</h2>
</section>
<section>
<h2>4</h2>
</section>
<section>
<h2>5</h2>
</section>
<script src="https://raw.githack.com/ApoorvSaxena/lozad.js/master/dist/lozad.min.js"></script>
<script>
var el = document.querySelectorAll('section');
var observer = lozad(el, {
rootMargin: '10px 0px', // syntax similar to that of CSS Margin
threshold: 0.1, // ratio of element convergence
load: function(el) {
console.log('el loaded');
// Custom implementation to load an element
// e.g. el.src = el.getAttribute('data-src');
}
}); // passing a `NodeList` (e.g. `document.querySelectorAll()`) is also valid
observer.observe();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment