Member Avatar for jacks smith

Hello friends,
I have runing a site, i am using JavaScript slideshow with huge images, it's take near 9 second to be load, what i will do so it will load quickly without removing images.

  • 6 Contributors
  • 6 Replies
  • 116 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by RykeTech

Dani AI

Generated

Building on 's description and the pointers from and , start by measuring before changing anything: run Lighthouse or the Network waterfall in Chrome DevTools and identify the largest files and the Largest Contentful Paint (LCP). Lighthouse and WebPageTest give a clear waterfall so fixes can be validated.

Use responsive images and modern formats so the browser downloads only what it needs. Example pattern (picture + srcset + native lazy loading):

<picture>
  <source type="image/avif" srcset="photo-400.avif 400w, photo-800.avif 800w">
  <source type="image/webp" srcset="photo-400.webp 400w, photo-800.webp 800w">
  <img
    src="photo-800.jpg"
    srcset="photo-400.jpg 400w, photo-800.jpg 800w"
    sizes="(max-width: 600px) 100vw, 800px"
    loading="lazy"
    alt=""
  >
</picture>

For the slideshow itself, avoid loading every slide on page load. Load the first slide, lazy-load others with loading="lazy" or an IntersectionObserver, and prefetch only the next slide for smooth transitions. Example lazy loader:

const io = new IntersectionObserver(entries => {
  entries.forEach(e => {
    if (e.isIntersecting) {
      const img = e.target;
      img.src = img.dataset.src;
      io.unobserve(img);
    }
  });
});
document.querySelectorAll('img[data-src]').forEach(img => io.observe(img));

Server and delivery matters: serve scaled images (not browser-resized), enable Brotli/Gzip, set cache headers, and use a CDN or image-optimization service that can serve WebP/AVIF on demand. Preload only your LCP image with <link rel="preload" as="image" href="..."> — avoid preloading everything. For implementation details on lazy-loading and responsive images see MDN responsive images and lazy loading guidance. Measure again after each change and iterate.

Recommended Answers

All 6 Replies

Member Avatar for JRM

Hello friends,
I have runing a site, i am using JavaScript slideshow with huge images, it's take near 9 second to be load, what i will do so it will load quickly without removing images.

Not a lot of detail in your question to be able to give a good answer.

The short answer is to use smaller images. I've seen some guys use way oversized images, then resize them in the CSS. The problem is that the whole image has to load before it gets re-sized. Start the smallest size posible. I think that you might want to experiment with ouputing the images in different formats to see which one yields the least byte count.
Gif and png are good in that respect.

Otherwise you will have to put up a banner for the visitor that says:
Best viewed with bandwidth of 10 meg/sec or greater. LOL

Member Avatar for OldTime

Have you though about using something else besides javascript for the slideshow, maybe jquery?

Member Avatar for Member #120589

jquery is js.

Echo optimizing images. Because your displaying on screen, not on print, res doesn't have to be ridiculous. Gif will give you the smallest size as a rule. However they're not particularly good for photos. The size of the images isn't that important - it's the level of detail/file size.

Member Avatar for OldTime

jquery is js.

Echo optimizing images. Because your displaying on screen, not on print, res doesn't have to be ridiculous. Gif will give you the smallest size as a rule. However they're not particularly good for photos. The size of the images isn't that important - it's the level of detail/file size.

Ok, maybe I should have been more specific. Something more optimized than plain javascript?

Member Avatar for ammgill

Hi,

I think that use of high images in javascript slideshow is slowing the downloading of the site. I recommened you to search for some other alternatives.

Member Avatar for RykeTech

If you have access to Photoshop there is a neat little tool that does all the optimizing for you. Open an image in Photoshop, click File and Save for Web and Devices. This will give you four different options of sizes and quality based on your criteria, and will dramatically increase load time. I use this method every time and it's never failed.

If you don't want to optimize your images, I suggest pre-loading them.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.