Lazy Image Loading via ScrollMagic
How do I make an lazy image loading via scrollmagic?
What is a lazy image loading via scrollmagic? How do you make a lazy image loading via scrollmagic? This script and codes were developed by Kendrick Arnett on 11 August 2022, Thursday.
Lazy Image Loading via ScrollMagic Previews
Lazy Image Loading via ScrollMagic - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Lazy Image Loading via ScrollMagic</title> <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='css/rlgxqp.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<svg> <filter id="blur"> <feGaussianBlur stdDeviation="5"></feGaussianBlur> <feColorMatrix type="matrix" values="1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 9 0"></feColorMatrix> <feComposite in2="SourceGraphic" operator="in"></feComposite> </filter>
</svg>
<h1>Smarter Lazy Loading With LQIP via ScrollMagic</h1>
<p><a href="https://developers.google.com/web/tools/chrome-devtools/profile/network-performance/network-conditions">Throttle your connection</a> and scroll to see the effect.</p>
<div class="lazyload-wrapper" data-src-lg="https://images.pier1.com/dis/dw/image/v2/AAID_PRD/on/demandware.static/-/Sites-pier1_master/default/images/ODR09/ODR09_1.jpg?sw=400&amp;sh=400"><img class="lazyload-small" src="https://images.pier1.com/dis/dw/image/v2/AAID_PRD/on/demandware.static/-/Sites-pier1_master/default/images/ODR09/ODR09_1.jpg?sw=10&amp;sh=10"/> <div class="lazyload-pad" style="padding-bottom: 100%"></div>
</div>
<div class="lazyload-wrapper" data-src-lg="https://images.pier1.com/dis/dw/image/v2/AAID_PRD/on/demandware.static/-/Sites-pier1_master/default/images/ODR09/ODR09_2.jpg?sw=400&amp;sh=400"><img class="lazyload-small" src="https://images.pier1.com/dis/dw/image/v2/AAID_PRD/on/demandware.static/-/Sites-pier1_master/default/images/ODR09/ODR09_2.jpg?sw=10&amp;sh=10"/> <div class="lazyload-pad" style="padding-bottom: 100%"></div>
</div>
<div class="lazyload-wrapper" data-src-lg="https://images.pier1.com/dis/dw/image/v2/AAID_PRD/on/demandware.static/-/Sites-pier1_master/default/images/2587987/2587987_14.jpg?sw=400&amp;sh=400"><img class="lazyload-small" src="https://images.pier1.com/dis/dw/image/v2/AAID_PRD/on/demandware.static/-/Sites-pier1_master/default/images/2587987/2587987_14.jpg?sw=10&amp;sh=10"/> <div class="lazyload-pad" style="padding-bottom: 100%"></div>
</div>
<div class="lazyload-wrapper" data-src-lg="https://images.pier1.com/dis/dw/image/v2/AAID_PRD/on/demandware.static/-/Sites-pier1_master/default/images/ODS001/ODS001_3.jpg?sw=400&amp;sh=400"><img class="lazyload-small" src="https://images.pier1.com/dis/dw/image/v2/AAID_PRD/on/demandware.static/-/Sites-pier1_master/default/images/ODS001/ODS001_3.jpg?sw=10&amp;sh=10"/> <div class="lazyload-pad" style="padding-bottom: 100%"></div>
</div>
<div class="lazyload-wrapper" data-src-lg="https://images.pier1.com/dis/dw/image/v2/AAID_PRD/on/demandware.static/-/Sites-pier1_master/default/images/ODS001/ODS001_1.jpg?sw=400&amp;sh=400"><img class="lazyload-small" src="https://images.pier1.com/dis/dw/image/v2/AAID_PRD/on/demandware.static/-/Sites-pier1_master/default/images/ODS001/ODS001_1.jpg?sw=10&amp;sh=10"/> <div class="lazyload-pad" style="padding-bottom: 100%"></div>
</div>
<div class="lazyload-wrapper" data-src-lg="https://images.pier1.com/dis/dw/image/v2/AAID_PRD/on/demandware.static/-/Sites-pier1_master/default/images/ODS005/ODS005_12.jpg?sw=400&amp;sh=400"><img class="lazyload-small" src="https://images.pier1.com/dis/dw/image/v2/AAID_PRD/on/demandware.static/-/Sites-pier1_master/default/images/ODS005/ODS005_12.jpg?sw=10&amp;sh=10"/> <div class="lazyload-pad" style="padding-bottom: 100%"></div>
</div>
<div class="lazyload-wrapper" data-src-lg="https://images.pier1.com/dis/dw/image/v2/AAID_PRD/on/demandware.static/-/Sites-pier1_master/default/images/2437340/2437340_14.jpg?sw=400&amp;sh=400"><img class="lazyload-small" src="https://images.pier1.com/dis/dw/image/v2/AAID_PRD/on/demandware.static/-/Sites-pier1_master/default/images/2437340/2437340_14.jpg?sw=10&amp;sh=10"/> <div class="lazyload-pad" style="padding-bottom: 100%"></div>
</div>
<div class="lazyload-wrapper" data-src-lg="https://images.pier1.com/dis/dw/image/v2/AAID_PRD/on/demandware.static/-/Sites-pier1_master/default/images/2580054/2580054_13.jpg?sw=400&amp;sh=400"><img class="lazyload-small" src="https://images.pier1.com/dis/dw/image/v2/AAID_PRD/on/demandware.static/-/Sites-pier1_master/default/images/2580054/2580054_13.jpg?sw=10&amp;sh=10"/> <div class="lazyload-pad" style="padding-bottom: 100%"></div>
</div>
<div class="lazyload-wrapper" data-src-lg="https://images.pier1.com/dis/dw/image/v2/AAID_PRD/on/demandware.static/-/Sites-pier1_master/default/images/2437340/2437340_13.jpg?sw=400&amp;sh=400"><img class="lazyload-small" src="https://images.pier1.com/dis/dw/image/v2/AAID_PRD/on/demandware.static/-/Sites-pier1_master/default/images/2437340/2437340_13.jpg?sw=10&amp;sh=10"/> <div class="lazyload-pad" style="padding-bottom: 100%"></div>
</div>
<div class="lazyload-wrapper" data-src-lg="https://images.pier1.com/dis/dw/image/v2/AAID_PRD/on/demandware.static/-/Sites-pier1_master/default/images/2580054/2580054_14.jpg?sw=400&amp;sh=400"><img class="lazyload-small" src="https://images.pier1.com/dis/dw/image/v2/AAID_PRD/on/demandware.static/-/Sites-pier1_master/default/images/2580054/2580054_14.jpg?sw=10&amp;sh=10"/> <div class="lazyload-pad" style="padding-bottom: 100%"></div>
</div>
<div class="lazyload-wrapper" data-src-lg="https://images.pier1.com/dis/dw/image/v2/AAID_PRD/on/demandware.static/-/Sites-pier1_master/default/images/ODS005/ODS005_14.jpg?sw=400&amp;sh=400"><img class="lazyload-small" src="https://images.pier1.com/dis/dw/image/v2/AAID_PRD/on/demandware.static/-/Sites-pier1_master/default/images/ODS005/ODS005_14.jpg?sw=10&amp;sh=10"/> <div class="lazyload-pad" style="padding-bottom: 100%"></div>
</div>
<div class="lazyload-wrapper" data-src-lg="https://images.pier1.com/dis/dw/image/v2/AAID_PRD/on/demandware.static/-/Sites-pier1_master/default/images/ODR14/ODR14_1.jpg?sw=400&amp;sh=400"><img class="lazyload-small" src="https://images.pier1.com/dis/dw/image/v2/AAID_PRD/on/demandware.static/-/Sites-pier1_master/default/images/ODR14/ODR14_1.jpg?sw=10&amp;sh=10"/> <div class="lazyload-pad" style="padding-bottom: 100%"></div>
</div>
<div class="lazyload-wrapper" data-src-lg="https://images.pier1.com/dis/dw/image/v2/AAID_PRD/on/demandware.static/-/Sites-pier1_master/default/images/2757667/2757667_13.jpg?sw=400&amp;sh=400"><img class="lazyload-small" src="https://images.pier1.com/dis/dw/image/v2/AAID_PRD/on/demandware.static/-/Sites-pier1_master/default/images/2757667/2757667_13.jpg?sw=10&amp;sh=10"/> <div class="lazyload-pad" style="padding-bottom: 100%"></div>
</div>
<div class="lazyload-wrapper" data-src-lg="https://images.pier1.com/dis/dw/image/v2/AAID_PRD/on/demandware.static/-/Sites-pier1_master/default/images/2757667/2757667_14.jpg?sw=400&amp;sh=400"><img class="lazyload-small" src="https://images.pier1.com/dis/dw/image/v2/AAID_PRD/on/demandware.static/-/Sites-pier1_master/default/images/2757667/2757667_14.jpg?sw=10&amp;sh=10"/> <div class="lazyload-pad" style="padding-bottom: 100%"></div>
</div>
<div class="lazyload-wrapper" data-src-lg="https://images.pier1.com/dis/dw/image/v2/AAID_PRD/on/demandware.static/-/Sites-pier1_master/default/images/2756976/2756976_13.jpg?sw=400&amp;sh=400"><img class="lazyload-small" src="https://images.pier1.com/dis/dw/image/v2/AAID_PRD/on/demandware.static/-/Sites-pier1_master/default/images/2756976/2756976_13.jpg?sw=10&amp;sh=10"/> <div class="lazyload-pad" style="padding-bottom: 100%"></div>
</div>
<div class="lazyload-wrapper" data-src-lg="https://images.pier1.com/dis/dw/image/v2/AAID_PRD/on/demandware.static/-/Sites-pier1_master/default/images/2662334/2662334_12.jpg?sw=400&amp;sh=400"><img class="lazyload-small" src="https://images.pier1.com/dis/dw/image/v2/AAID_PRD/on/demandware.static/-/Sites-pier1_master/default/images/2662334/2662334_12.jpg?sw=10&amp;sh=10"/> <div class="lazyload-pad" style="padding-bottom: 100%"></div>
</div>
<div class="lazyload-wrapper" data-src-lg="https://images.pier1.com/dis/dw/image/v2/AAID_PRD/on/demandware.static/-/Sites-pier1_master/default/images/PS64654/PS64654_10A.jpg?sw=400&amp;sh=400"><img class="lazyload-small" src="https://images.pier1.com/dis/dw/image/v2/AAID_PRD/on/demandware.static/-/Sites-pier1_master/default/images/PS64654/PS64654_10A.jpg?sw=10&amp;sh=10"/> <div class="lazyload-pad" style="padding-bottom: 100%"></div>
</div>
<div class="lazyload-wrapper" data-src-lg="https://images.pier1.com/dis/dw/image/v2/AAID_PRD/on/demandware.static/-/Sites-pier1_master/default/images/2506440/2506440_10A.jpg?sw=400&amp;sh=400"><img class="lazyload-small" src="https://images.pier1.com/dis/dw/image/v2/AAID_PRD/on/demandware.static/-/Sites-pier1_master/default/images/2506440/2506440_10A.jpg?sw=10&amp;sh=10"/> <div class="lazyload-pad" style="padding-bottom: 100%"></div>
</div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Lazy Image Loading via ScrollMagic - Script Codes CSS Codes
html, body { height: 100%;
}
body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; background-color: #fefdfd; font-family: 'Open Sans';
}
.lazyload-wrapper { margin-top: 5vh; margin-bottom: 61vh; min-width: 33vh; background-color: #f6f6f6; background-size: cover; background-repeat: no-repeat; position: relative; background: -webkit-linear-gradient(right, #efefef 0%, #fcfcfc 50%, #efefef 100%); background: linear-gradient(-90deg, #efefef 0%, #fcfcfc 50%, #efefef 100%); background-size: 400% 400%; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); -webkit-animation: pulse 1.2s ease-in-out infinite; animation: pulse 1.2s ease-in-out infinite;
}
@-webkit-keyframes pulse { 0% { background-position: 0% 0%; } 100% { background-position: -135% 0%; }
}
@keyframes pulse { 0% { background-position: 0% 0%; } 100% { background-position: -135% 0%; }
}
.lazyload-wrapper img { position: absolute; opacity: 0; top: 0; left: 0; width: 100%; -webkit-transition: opacity 100ms linear; transition: opacity 100ms linear;
}
.lazyload-wrapper img.loaded { opacity: 1;
}
.lazyload { background-color: #fff; margin-top: 10vh; margin-bottom: 90vh; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; min-height: 20vw; min-width: 20vw; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23); border-radius: 2px;
}Lazy Image Loading via ScrollMagic - Script Codes JS Codes
var ctrl = new ScrollMagic.Controller();
$(document).ready(function () { $('.lazyload-wrapper').each(function () { var wrapper = this, small = wrapper.querySelector('.lazyload-small'); var img = new Image(); img.src = small.src; img.onload = function () { small.classList.add('loaded'); }; });
});
$('.lazyload-wrapper .lazyload-small').each(function () { var currentImage = this; new ScrollMagic.Scene( { triggerElement: currentImage, offset: (-document.documentElement.clientHeight / 2) + 100 }) .on('enter', function () { var wrapper = this.triggerElement().parentElement; var imgLarge = new Image(); imgLarge.src = wrapper.dataset.srcLg; imgLarge.onload = function () { imgLarge.classList.add('loaded'); }; wrapper.appendChild(imgLarge); }) .addTo(ctrl);
});
| Developer | Kendrick Arnett |
| Username | kendrick |
| Uploaded | August 11, 2022 |
| Rating | 3 |
| Size | 4,812 Kb |
| Views | 89,056 |
Do you need developer help for Lazy Image Loading via ScrollMagic?
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!
Kendrick Arnett (kendrick) Script Codes
| Name | Size |
| Grid With 2-Up Skyscrapers | 3,307 Kb |
| Linkish Buttons | 2,357 Kb |
| Preliminary Tags | 2,632 Kb |
| SVG Social Icons | 4,587 Kb |
| Media Queries via include-media | 7,667 Kb |
| Include-media Include | 10,238 Kb |
| Flexbox Resume Challenge | 10,625 Kb |
| Variation Button Styles | 2,756 Kb |
| A11y Product Tile | 4,484 Kb |
| Colors | 6,261 Kb |
Create amazing marketing copy 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!
Similar Scripts & Codes
| Name | Username | Size |
| Image grid with captions | Mchernin34 | 2,222 Kb |
| Getting Started | Viblast | 1,500 Kb |
| Button shaking | SusanneLundblad | 2,227 Kb |
| Vertically rotating text with CSS | Nopr | 2,141 Kb |
| Google Maps API Ground Overlay | Boycetrus | 2,961 Kb |
| Weather Icons | Gtalin | 2,519 Kb |
| Subscription Newsletter - Before inlining | Bradstrong | 7,526 Kb |
| A Pen by Alex Bergin | Abergin | 3,347 Kb |
| Horizontal scroll fixed element | HerrSerker | 0 Kb |
| Sinclair Research Computers | MattCowley | 3,068 Kb |
Do you want hide your ip address?
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!