Landing: Switch off to highlight fact event during resize
Fact images should load smoothly now
Change-Id: Ib441f01638362a0c725f20a117d3248ad88ae88d
diff --git a/apps/landing/layouts/_default/list.html b/apps/landing/layouts/_default/list.html
index 57d7633..471e61a 100644
--- a/apps/landing/layouts/_default/list.html
+++ b/apps/landing/layouts/_default/list.html
@@ -23,12 +23,12 @@
<!-- 1 Large Box 3x3 -->
{{ $firstFact := index $sortedFacts 0 }}
<div id="factImageBox" class="fact-image-box">
- <img id="factImage" src="/images/fact-1.png" alt="{{ $firstFact.Title }}" class="fact-image">
+ <img id="factImage" src="/images/fact-1.png" alt="{{ $firstFact.Title }}" class="fact-image" loading="lazy">
</div>
</div>
</div>
<div class="footer-form">
{{ partial "register-form.html" . }}
</div>
-<script src="/js/main.js"></script>
+<script src="/js/main.js?v=0.0.2"></script>
{{ end }}
diff --git a/apps/landing/static/js/main.js b/apps/landing/static/js/main.js
index 2e6a436..a068560 100644
--- a/apps/landing/static/js/main.js
+++ b/apps/landing/static/js/main.js
@@ -105,5 +105,37 @@
checkAddRemoveScrollListener();
- window.addEventListener("resize", checkAddRemoveScrollListener);
+ let resizing = false;
+ const resizeDelayTime = 1000;
+ let resizeTimeout;
+
+ const startResizing = () => {
+ clearTimeout(resizeTimeout);
+ resizing = true;
+ document.querySelectorAll(".facts").forEach(fact => {
+ fact.removeEventListener("mouseover", handleMouseover);
+ });
+ };
+
+ const stopResizing = () => {
+ clearTimeout(resizeTimeout);
+ resizeTimeout = setTimeout(() => {
+ resizing = false;
+ checkAddRemoveScrollListener();
+ document.querySelectorAll(".facts").forEach((fact, index) => {
+ fact.addEventListener("mouseover", () => handleMouseover(facts[index].params.image, index, facts[index].params.title));
+ });
+ }, resizeDelayTime);
+ };
+
+ window.addEventListener("resize", () => {
+ if (!resizing) {
+ startResizing();
+ }
+ stopResizing();
+ });
+
+ document.querySelectorAll(".facts").forEach((fact, index) => {
+ fact.addEventListener("mouseover", () => handleMouseover(facts[index].params.image, index, facts[index].params.title));
+ });
});