Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Lazy loading is added #451

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Lazy loading is added #451

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d9eaba8
Lazy loading is added
shraddha761 Jul 1, 2023
3efb7dc
Merge branch 'main' into lazyLoading
shraddha761 Jul 2, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 17 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,10 +16,12 @@
</head>

<body>
<div class="lazy" data-src="index.html"></div>
<!-- Navbar Section Started -->
<nav class="navBar1">
<div class="fullNav">
<div id="logo">
<img src="./img/logo/navLogo.png" alt="AISKCON-Construction" loading="lazy"/>
<a href="index.html"><img src="./img/logo/navLogo.png" alt="AISKCON-Construction" /></a>
</div>
<ul class="list1">
Expand Down Expand Up @@ -168,7 +170,7 @@ <h1 data-aos="fade-up" data-aos-duration="1000">
onclick="window.location.href='./slotBooking/form.html'"><span>Book Us</span></button>
</div>
<div class="hero-img">
<img src="./img/vectors/hero.gif" alt="" srcset="" />
<img src="./img/vectors/hero.gif" alt="" srcset="" loading="lazy"/>
</div>
</div>
</section>
Expand Down Expand Up @@ -197,6 +199,7 @@ <h3>Construction Management</h3>
</p>
</div>
<div class="servicesection-image">
<img src="./img/bg/design-and-build.jpg" alt="design-and-build" loading="lazy"/>
<img src="./img/bg/design-and-build.webp" alt="design-and-build" />
<h3>Design and Build</h3>
<p>
Expand All @@ -205,6 +208,7 @@ <h3>Design and Build</h3>
</p>
</div>
<div class="servicesection-image">
<img src="./img/bg/preconstruction.jpg" alt="preconstruction" loading="lazy"/>
<img src="./img/bg/preconstruction.webp" alt="preconstruction" />
<h3>Preconstruction Consulting</h3>
<p>
Expand All @@ -213,6 +217,7 @@ <h3>Preconstruction Consulting</h3>
</p>
</div>
<div class="servicesection-image">
<img src="./img/bg/special-projects.jpg" alt="special-projects" loading="lazy"/>
<img src="./img/bg/special-projects.webp" alt="special-projects" />
<h3>Special Projects</h3>
<p>
Expand All @@ -221,6 +226,7 @@ <h3>Special Projects</h3>
</p>
</div>
<div class="servicesection-image">
<img src="./img/bg/renovation.jpg" alt="renovation" loading="lazy"/>
<img src="./img/bg/renovation.webp" alt="renovation" />
<h3>Renovations</h3>
<p>
Expand All @@ -235,6 +241,8 @@ <h3>Renovations</h3>
<!-- BUILD WITH QYALITY SECTION -->
<div class="container-buildquality">
<div class="content-quality">
<img class="image-quality" src="./img/vectors/build-with-quality.jpg" alt="Image- build-with-quality"
data-aos="fade-right" data-aos-easing="ease" data-aos-duration="1000" loading="lazy"/>
<img class="image-quality" src="./img/vectors/build-with-quality.webp" alt="Image- build-with-quality"
data-aos="fade-right" data-aos-easing="ease" data-aos-duration="1000" />
<div class="text-qualitymaterial" data-aos="fade-down" data-aos-easing="ease" data-aos-duration="1000">
Expand Down Expand Up @@ -401,6 +409,8 @@ <h1>Green</h1>
<section class="container-expert">
<div class="content-1">
<img data-aos="fade-right" data-aos-easing="ease" data-aos-duration="1000" class="image-1"
src="./img/vectors/customer-support.png" alt="Image-Talk with expert person" loading="lazy"/>

src="./img/vectors/customer1.png" alt="Image-Talk with expert person" />
<div class="text-contact" data-aos="fade-up" data-aos-easing="ease" data-aos-duration="1000">
<h1>Contact With Our Experts</h1>
Expand Down Expand Up @@ -443,6 +453,7 @@ <h1>Our Clients Say!</h1>
<div class="testinomial-card" id="testinomial-card-1" data-aos="fade-up" data-aos-easing="ease"
data-aos-duration="1000">
<div class="testinomial-card-head">
<img src="./img/vectors/user.jpg" alt="img" loading="lazy"/>
<img src="./img/vectors/user.webp" alt="img" />
<div style="line-height: 1.4; font-size: 0.9rem">
<h3>Utkarsh Saxena</h3>
Expand All @@ -462,6 +473,7 @@ <h3>Utkarsh Saxena</h3>
<div class="testinomial-card" id="testinomial-card-2" data-aos="fade-down" data-aos-easing="ease"
data-aos-duration="1000">
<div class="testinomial-card-head">
<img src="./img/vectors/user.jpg" alt="img" loading="lazy"/>
<img src="./img/vectors/user.webp" alt="img" />
<div style="line-height: 1.4; font-size: 0.9rem">
<h3>Abhi Patel</h3>
Expand All @@ -479,6 +491,7 @@ <h3>Abhi Patel</h3>
</div>
<div class="testinomial-card" data-aos="fade-right" data-aos-easing="ease" data-aos-duration="1000">
<div class="testinomial-card-head">
<img src="./img/vectors/user.jpg" alt="img" loading="lazy"/>
<img src="./img/vectors/user.webp" alt="img" />
<div style="line-height: 1.4; font-size: 0.9rem">
<h3>Rolika Agarwal</h3>
Expand All @@ -492,6 +505,7 @@ <h3>Rolika Agarwal</h3>
</div>
<div class="testinomial-card" data-aos="fade-up" data-aos-easing="ease" data-aos-duration="1000">
<div class="testinomial-card-head">
<img src="./img/vectors/user.jpg" alt="img" loading="lazy"/>
<img src="./img/vectors/user.webp" alt="img" />
<div style="line-height: 1.4; font-size: 0.9rem">
<h3>Kartikay Asija</h3>
Expand All @@ -507,6 +521,7 @@ <h3>Kartikay Asija</h3>
<div class="testinomial-card" id="testinomial-card-5" data-aos="fade-down" data-aos-easing="ease"
data-aos-duration="1000">
<div class="testinomial-card-head">
<img src="./img/vectors/user.jpg" alt="img" loading="lazy"/>
<img src="./img/vectors/user.webp" alt="img" />
<div style="line-height: 1.4; font-size: 0.9rem">
<h3>Swastik</h3>
Expand Down Expand Up @@ -666,7 +681,7 @@ <h2>Chat with us</h2>
<div class="row">
<div class="footer-col footer-brand">
<div class="footer-logo">
<img src="./img/logo/aiskcon logo.png" alt="logo" srcset="" />
<img src="./img/logo/aiskcon logo.png" alt="logo" srcset="" loading="lazy"/>
</div>
<div class="social-links">
<a href="#"><i class="fab fa-facebook-f"></i></a>
Expand Down
46 changes: 45 additions & 1 deletion js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -301,4 +301,48 @@ update = function () {
requestAnimationFrame(update);
};
requestAnimationFrame(update);
// Particle Js End
// Particle Js End

(function() {
'use strict';

var lazyElements = [].slice.call(document.querySelectorAll('.lazy'));

var loadLazyContent = function(lazyElement) {
var url = lazyElement.getAttribute('data-src');

// Make an AJAX request to fetch the lazy content
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
// Set the fetched content as the innerHTML of the lazy element
lazyElement.innerHTML = xhr.responseText;
lazyElement.classList.add('loaded');
}
}
};
xhr.open('GET', url, true);
xhr.send();
};

var lazyLoadHandler = function() {
lazyElements.forEach(function(lazyElement) {
var rect = lazyElement.getBoundingClientRect();

// Check if the lazy element is within the viewport
if (rect.top >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)) {
loadLazyContent(lazyElement);
}
});

// Remove the event listener once all lazy elements are loaded
if (lazyElements.length === 0) {
window.removeEventListener('scroll', lazyLoadHandler);
}
};

// Add the lazyLoadHandler to the scroll event
window.addEventListener('scroll', lazyLoadHandler);
lazyLoadHandler(); // Call it once to load any initially visible elements
})();