Member Avatar for <M/>

I created a slider that slides left to right, but when i load the page, it takes a while for the image show up, does anyone know how to make images load quicker? Maybe make them smaller?

  • 2 Contributors
  • 2 Replies
  • 116 Views
  • 3 Hours Discussion Span
  • Latest Post Latest Post by <M/>

Dani AI

Generated

Quick, practical ways to make a slider feel much faster (building on the thread — thanks and ).

Use prioritized loading and lazy-loading together. Preload only the first slide so the browser fetches it with high priority, and lazy-load the rest so they do not block initial rendering. Example:

<link rel="preload" as="image" href="/images/slide1-800.jpg">

<img src="/images/slide1-800.jpg"
     srcset="/images/slide1-400.jpg 400w, /images/slide1-800.jpg 800w, /images/slide1-1600.jpg 1600w"
     sizes="(max-width: 600px) 400px, 800px"
     loading="lazy"
     alt="Slide 1">

Use native lazy loading first (loading="lazy") and provide an IntersectionObserver fallback for older browsers:

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

Improve perceived speed with low-quality image placeholders (LQIP) or progressive/interlaced images so users see a preview quickly while the full image finishes. Serve modern formats (WebP/AVIF) with fallbacks where needed, and use srcset/sizes so devices only download the resolution they need.

Operational tips: compress assets with tools like TinyPNG, put images on a CDN, and set long cache headers for static slides. Measure impact with Chrome DevTools network throttling and Lighthouse so you know which change helps most.

Further reading and implementation details: MDN on lazy loading and responsive images, and Google’s web.dev guidance on optimizing images:

Cautions: preload only the single critical image to avoid wasted bandwidth; provide fallbacks for modern formats; test on real devices and slow networks.

Recommended Answers

All 2 Replies

Member Avatar for JorgeM

Of course the size of the image is directly related to the time it takes to load. Make sure that your image dimensions already match what you are displaying. In other words, if the original image is 2mb in size 5400x3600, and you have the browser resize to 540x360, that's not a good idea.

In addition, you could have a "spinning/progress bar" displayed until your images are ready.

Member Avatar for <M/>

A spinning bar could be a good solution :)

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.