LazyLoad.js Example
How do I make an lazyload.js example?
Demo of a small JavaScript thingy I made to lazy load content.. What is a lazyload.js example? How do you make a lazyload.js example? This script and codes were developed by Kevin Gimbel on 08 September 2022, Thursday.
LazyLoad.js Example - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>lazyLoad.js Example</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Scroll down</h1>
<div class="playlist">
<iframe width="100%" height="450" scrolling="no" frameborder="no" src="" data-src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/186211537&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
<iframe width="100%" height="450" scrolling="no" frameborder="no" src="" data-src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/116098730&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>
</div> <script src="js/index.js"></script>
</body>
</html>
LazyLoad.js Example - Script Codes CSS Codes
.playlist { margin-top: 40rem; background: #ddd; padding: 2rem; width: 100; max-width: 30rem; margin: 40rem auto 0 auto;
}
LazyLoad.js Example - Script Codes JS Codes
var LazyLoad = function(opts) { var opts = opts || {}; this.options = { parent: opts.parent || '.lazyload', childs: opts.childs || 'img', attr: opts.attr || 'data-src', offset: opts.offset || 200 } this.parent = document.querySelector(this.options.parent); this.childs = this.parent.querySelectorAll(this.options.childs);
}
LazyLoad.prototype.init = function() { this.checkOffset(); this.bindScroll();
}
LazyLoad.prototype.checkOffset = function() { var viewportHeight = window.innerHeight; var windowOffset = (window.scrollY > 0) ? window.scrollY : 0; var childs = this.childs; var offsetBounce = viewportHeight; var childsLen = this.childs.length; if(this.parent.offsetTop - offsetBounce <= windowOffset) { for(var i = 0; i <= childsLen - 1, cur = childs[i]; i++) { // check if the current element needs to be displayed. if(cur.offsetTop - offsetBounce <= windowOffset) { if(cur.dataset.src !== '') { cur.src = cur.dataset.src; cur.dataset.src = ''; } } } }
}
LazyLoad.prototype.bindScroll = function() { window.addEventListener('scroll', function() { this.checkOffset(); }.bind(this))
}
var soundcloud_options = { childs: 'iframe', parent: '.playlist'
}
var soundcloud_slowpoke = new LazyLoad(soundcloud_options).init();
Developer | Kevin Gimbel |
Username | kevingimbel |
Uploaded | September 08, 2022 |
Rating | 3 |
Size | 2,537 Kb |
Views | 26,312 |
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!
Name | Size |
CSS3 only Aperture Science Retro Logo | 4,115 Kb |
Felixble Product Flags | 5,907 Kb |
ViewSwitcher | 4,203 Kb |
Register or Sponsor Prototype | 3,183 Kb |
Pinterest Thumb | 5,308 Kb |
Pure CSS3 single element Link from TLOZ | 5,118 Kb |
Chat UI - WIP | 7,858 Kb |
Alternative Image Classes in Markdown | 6,385 Kb |
Nerdli.st | 5,688 Kb |
CSS3 only Vault-Tec Logo | 3,855 Kb |
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!
Name | Username | Size |
Animated rainbow wave on canvas | Icodeforlove | 2,777 Kb |
IbrahimJabbari-Effect14 | Ibrahimjabbari | 1,919 Kb |
Simple Linear Regression with Editable Table | Melatonind | 3,264 Kb |
CSS3 Media Queries demo | Machal | 1,824 Kb |
A Pen by Huan Nghiem | Nightshade | 10,646 Kb |
Sony Xperia Z3 Flat MockUp | Dapinitial | 4,379 Kb |
Hc first draft | Stepfray | 5,104 Kb |
Very Simple Slider | Doodlemarks | 2,682 Kb |
Wikipedia API | Coderpilot | 2,802 Kb |
CSS background-size - GSAP | Jonathan | 2,209 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!