Prioritizing Image Loading (#66)

Prioritized image loading in js

<!-- ISSUE & PR TITLE SHOULD BE SAME-->
## Description
<!--Please include a brief description of the changes-->
I added prioritizing code for images in js file

## Related Issues

<!--Cite any related issue(s) this pull request addresses. If none,
simply state “None”-->
- Closes #23 

## Type of PR
<!-- Mention PR Type according to the issue in brackets below and check
the below box -->
- [X] (Bug)

## Screenshots / videos (if applicable)
<!--Attach any relevant screenshots or videos demonstrating the
changes-->


## Checklist
<!-- [X] - put a cross/X inside [] to check the box -->
- [x] I have gone through the [contributing
guide](https://github.com/Anjaliavv51/Retro)
- [x] I have updated my branch and synced it with project `main` branch
before making this PR
- [X] I have performed a self-review of my code
- [X] I have tested the changes thoroughly before submitting this pull
request.
- [X] I have provided relevant issue numbers, screenshots, and videos
after making the changes.
- [X] I have commented my code, particularly in hard-to-understand
areas.


## Additional context:
<!--Include any additional information or context that might be helpful
for reviewers.-->

cart.js

@@ -72,3 +72,30 @@ orderBtn.addEventListener("click", ()=>{
        alert("Order placed!");
    }
 })
+
+// Prioritizing Image Loading
+<script>
+  // Critical images
+  const criticalImages = document.querySelectorAll('.critical-image');
+
+  // Lazy load other images
+  const lazyImages = document.querySelectorAll('img[data-src]');
+
+  // Load critical images immediately
+  criticalImages.forEach(image => {
+    image.src = image.dataset.src;
+  });
+
+  // Use Intersection Observer for lazy loading
+  const observer = new IntersectionObserver(entries => {
+    entries.forEach(entry => {
+      if (entry.isIntersecting) {
+        entry.target.src = entry.target.dataset.src;
+        observer.unobserve(entry.target);
+      }
+    });
+  });
+
+  lazyImages.forEach(image => observer.observe(image));
+</script>
+