Skip to content

Commit 10cef26

Browse files
ten24bytesten24bytes
committed
feat(lazy-loading): implement lazy loading for images to improve performance
- Add CSS for lazy loading effects - Enhance JavaScript to support IntersectionObserver for modern browsers - Fallback for older browsers to load images on scroll
1 parent e78b076 commit 10cef26

3 files changed

Lines changed: 110 additions & 15 deletions

File tree

‎assets/css/templatemo-grad-school.css‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,20 @@ p {
3636
line-height: 22px;
3737
}
3838

39+
/* Lazy Loading Images */
40+
.lazy-image {
41+
opacity: 0;
42+
transition: opacity 0.5s ease-in-out;
43+
}
44+
45+
.lazy-image.loaded {
46+
opacity: 1;
47+
}
48+
49+
.lazy-image[loading="eager"] {
50+
opacity: 1;
51+
}
52+
3953

4054
.section-heading {
4155
text-align: center;

‎assets/js/custom.js‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -130,4 +130,85 @@
130130
}, 900);
131131
});
132132

133+
134+
// Lazy Loading Enhancement for Images
135+
(function initLazyLoading() {
136+
// Check if IntersectionObserver is supported
137+
if ('IntersectionObserver' in window) {
138+
// Use IntersectionObserver for modern browsers
139+
var lazyImageObserver = new IntersectionObserver(function(entries, observer) {
140+
entries.forEach(function(entry) {
141+
if (entry.isIntersecting) {
142+
var lazyImage = entry.target;
143+
144+
// Add loaded class for fade-in effect
145+
if (lazyImage.complete) {
146+
lazyImage.classList.add('loaded');
147+
} else {
148+
lazyImage.addEventListener('load', function() {
149+
lazyImage.classList.add('loaded');
150+
});
151+
}
152+
153+
// Stop observing this image
154+
lazyImageObserver.unobserve(lazyImage);
155+
}
156+
});
157+
}, {
158+
// Start loading when image is 200px away from viewport
159+
rootMargin: '200px'
160+
});
161+
162+
// Observe all lazy images
163+
$('.lazy-image').each(function() {
164+
lazyImageObserver.observe(this);
165+
});
166+
} else {
167+
// Fallback for older browsers - load images on scroll
168+
var lazyImages = $('.lazy-image');
169+
170+
function loadVisibleImages() {
171+
lazyImages.each(function() {
172+
var $img = $(this);
173+
if ($img.hasClass('loaded')) return;
174+
175+
var rect = this.getBoundingClientRect();
176+
var windowHeight = window.innerHeight || document.documentElement.clientHeight;
177+
178+
// Check if image is in viewport (with 200px threshold)
179+
if (rect.top <= windowHeight + 200 && rect.bottom >= -200) {
180+
if (this.complete) {
181+
$img.addClass('loaded');
182+
} else {
183+
$img.on('load', function() {
184+
$(this).addClass('loaded');
185+
});
186+
}
187+
}
188+
});
189+
}
190+
191+
// Initial check
192+
loadVisibleImages();
193+
194+
// Check on scroll (throttled)
195+
var scrollTimeout;
196+
$(window).on('scroll', function() {
197+
if (scrollTimeout) {
198+
clearTimeout(scrollTimeout);
199+
}
200+
scrollTimeout = setTimeout(loadVisibleImages, 100);
201+
});
202+
}
203+
204+
// Ensure images already loaded (cached) get the 'loaded' class immediately
205+
$(window).on('load', function() {
206+
$('.lazy-image').each(function() {
207+
if (this.complete && !$(this).hasClass('loaded')) {
208+
$(this).addClass('loaded');
209+
}
210+
});
211+
});
212+
})();
213+
133214
})(jQuery);

‎index.html‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
<!--header-->
3838
<header class="main-header clearfix" role="header">
3939
<div class="logo">
40-
<a href="#"><img src="assets/images/codesphere-brandname.png" alt="CodeSphere" /></a>
40+
<a href="#"><img src="assets/images/codesphere-brandname.png" alt="CodeSphere" loading="eager" /></a>
4141
</div>
4242
<a href="#menu" class="menu-link"><i class="fa fa-bars"></i></a>
4343
<nav id="menu" class="main-nav" role="navigation">
@@ -170,7 +170,7 @@ <h2>Who we are?</h2>
170170
<article id="tabs-1">
171171
<div class="row">
172172
<div class="col-md-6">
173-
<img src="assets/images/choose-us-image-01.png" alt="CodeSphere Mission" />
173+
<img src="assets/images/choose-us-image-01.png" alt="CodeSphere Mission" loading="lazy" class="lazy-image" />
174174
</div>
175175
<div class="col-md-6">
176176
<h4>Our Mission</h4>
@@ -189,7 +189,7 @@ <h4>Our Mission</h4>
189189
<article id="tabs-2">
190190
<div class="row">
191191
<div class="col-md-6">
192-
<img src="assets/images/choose-us-image-02.png" alt="CodeSphere Teaching Approach" />
192+
<img src="assets/images/choose-us-image-02.png" alt="CodeSphere Teaching Approach" loading="lazy" class="lazy-image" />
193193
</div>
194194
<div class="col-md-6">
195195
<h4>Our Approach</h4>
@@ -209,7 +209,7 @@ <h4>Our Approach</h4>
209209
<article id="tabs-3">
210210
<div class="row">
211211
<div class="col-md-6">
212-
<img src="assets/images/choose-us-image-03.png" alt="CodeSphere Learning Community" />
212+
<img src="assets/images/choose-us-image-03.png" alt="CodeSphere Learning Community" loading="lazy" class="lazy-image" />
213213
</div>
214214
<div class="col-md-6">
215215
<h4>Our Community</h4>
@@ -310,7 +310,7 @@ <h4>Learn from <em>Sana Siddiqui</em></h4>
310310
<div class="col-md-6">
311311
<article class="video-item">
312312
<figure style="display: flex; justify-content: center; align-items: center;">
313-
<img src="assets/images/instructor.jpg" alt="Sana Siddiqui - Founder & Lead Instructor" style="max-width: 400px; width: 100%; border-radius: 15px; border: 5px solid #f5a425; box-shadow: 0 10px 30px rgba(0,0,0,0.3); transform: rotate(-2deg); transition: transform 0.3s ease;">
313+
<img src="assets/images/instructor.jpg" alt="Sana Siddiqui - Founder & Lead Instructor" loading="lazy" class="lazy-image" style="max-width: 400px; width: 100%; border-radius: 15px; border: 5px solid #f5a425; box-shadow: 0 10px 30px rgba(0,0,0,0.3); transform: rotate(-2deg); transition: transform 0.3s ease;">
314314
</figure>
315315
</article>
316316
</div>
@@ -329,7 +329,7 @@ <h2>Choose Your Course</h2>
329329
<div class="owl-carousel owl-theme">
330330
<!-- Course 1: Scratch -->
331331
<div class="item">
332-
<img src="assets/images/courses-01.jpg" alt="Scratch Programming">
332+
<img src="assets/images/courses-01.jpg" alt="Scratch Programming" loading="lazy" class="lazy-image">
333333
<div class="down-content">
334334
<h4>Scratch Programming</h4>
335335
<p>Visual block-based coding to introduce programming fundamentals through fun, interactive projects.</p>
@@ -341,7 +341,7 @@ <h4>Scratch Programming</h4>
341341
</div>
342342
</div>
343343
<div class="author-image">
344-
<img src="assets/images/author-01.png" alt="Author" />
344+
<img src="assets/images/author-01.png" alt="Author" loading="lazy" class="lazy-image" />
345345
</div>
346346
<div class="text-button-contact">
347347
<a href="#section6" class="contact-course" data-course="Scratch" data-grades="3-5">Contact <i class="fa fa-angle-double-right"></i></a>
@@ -351,7 +351,7 @@ <h4>Scratch Programming</h4>
351351

352352
<!-- Course 2: Python -->
353353
<div class="item">
354-
<img src="assets/images/courses-02.jpg" alt="Python Programming">
354+
<img src="assets/images/courses-02.jpg" alt="Python Programming" loading="lazy" class="lazy-image">
355355
<div class="down-content">
356356
<h4>Python Programming</h4>
357357
<p>Learn one of the most versatile programming languages, perfect for beginners and future developers.</p>
@@ -363,7 +363,7 @@ <h4>Python Programming</h4>
363363
</div>
364364
</div>
365365
<div class="author-image">
366-
<img src="assets/images/author-02.png" alt="Author" />
366+
<img src="assets/images/author-02.png" alt="Author" loading="lazy" class="lazy-image" />
367367
</div>
368368
<div class="text-button-contact">
369369
<a href="#section6" class="contact-course" data-course="Python" data-grades="6-10">Contact <i class="fa fa-angle-double-right"></i></a>
@@ -373,7 +373,7 @@ <h4>Python Programming</h4>
373373

374374
<!-- Course 3: Java -->
375375
<div class="item">
376-
<img src="assets/images/courses-03.jpg" alt="Java Programming">
376+
<img src="assets/images/courses-03.jpg" alt="Java Programming" loading="lazy" class="lazy-image">
377377
<div class="down-content">
378378
<h4>Java Programming</h4>
379379
<p>Master object-oriented programming with Java, preparing for AP Computer Science and beyond.</p>
@@ -385,7 +385,7 @@ <h4>Java Programming</h4>
385385
</div>
386386
</div>
387387
<div class="author-image">
388-
<img src="assets/images/author-03.png" alt="Author" />
388+
<img src="assets/images/author-03.png" alt="Author" loading="lazy" class="lazy-image" />
389389
</div>
390390
<div class="text-button-contact">
391391
<a href="#section6" class="contact-course" data-course="Java" data-grades="9-12">Contact <i class="fa fa-angle-double-right"></i></a>
@@ -395,7 +395,7 @@ <h4>Java Programming</h4>
395395

396396
<!-- Course 4: Web Designing -->
397397
<div class="item">
398-
<img src="assets/images/courses-04.jpg" alt="Web Designing">
398+
<img src="assets/images/courses-04.jpg" alt="Web Designing" loading="lazy" class="lazy-image">
399399
<div class="down-content">
400400
<h4>Web Designing</h4>
401401
<p>Create stunning websites using HTML, CSS, and JavaScript. Build and deploy real web projects.</p>
@@ -407,7 +407,7 @@ <h4>Web Designing</h4>
407407
</div>
408408
</div>
409409
<div class="author-image">
410-
<img src="assets/images/author-04.png" alt="Author" />
410+
<img src="assets/images/author-04.png" alt="Author" loading="lazy" class="lazy-image" />
411411
</div>
412412
<div class="text-button-contact">
413413
<a href="#section6" class="contact-course" data-course="Web Designing" data-grades="5-10">Contact <i class="fa fa-angle-double-right"></i></a>
@@ -417,7 +417,7 @@ <h4>Web Designing</h4>
417417

418418
<!-- Course 5: Custom Courses -->
419419
<div class="item">
420-
<img src="assets/images/courses-05.jpg" alt="Custom Courses">
420+
<img src="assets/images/courses-05.jpg" alt="Custom Courses" loading="lazy" class="lazy-image">
421421
<div class="down-content">
422422
<h4>Course Not Listed?</h4>
423423
<p>We offer customized courses tailored to your child's interests and learning goals. Contact us!</p>
@@ -429,7 +429,7 @@ <h4>Course Not Listed?</h4>
429429
</div>
430430
</div>
431431
<div class="author-image">
432-
<img src="assets/images/author-05.png" alt="Author" />
432+
<img src="assets/images/author-05.png" alt="Author" loading="lazy" class="lazy-image" />
433433
</div>
434434
<div class="text-button-contact">
435435
<a href="#section6" class="contact-course" data-course="Custom Course" data-grades="All">Contact <i class="fa fa-angle-double-right"></i></a>

0 commit comments

Comments
 (0)