Preventing image flickering in SvelteKit: A guide

Question

Preventing image flickering in SvelteKit: A guide

Upon the initial loading of a website, you may notice that the images tend to flicker or flash when transitioning between them. However, once these images are stored in the browser's cache, subsequent visits to the site will display the images seamlessly and without any flashing or delays.

<script lang="ts">
    import {onMount} from "svelte";
    import {writable} from "svelte/store";

    // Specify the URLs for your images here
    const images = [
        {
            path: "https://static.bunnycdn.ru/i/cache/images/5/58/5806a16f2892768b4930c39ebf6ce756.jpg",
            id: "Image 1",
        },
        {
            path: "https://static.bunnycdn.ru/i/cache/images/0/03/0307ce050517b8fde68134b23fa9b1d1.jpg",
            id: "Image 2",
        },
    ];

    let currentIndex = writable(0);

    let interval: ReturnType<typeof setInterval>;

    onMount(() => {
        interval = setInterval(() => {
            currentIndex.update((value) => (value + 1) % images.length);
        }, 3000); // Change slide every 3 seconds
        return () => {
            clearInterval(interval);
        };
    });
</script>

<div class="slideshow">
    <div class="list">
        {#each images as image, i (image)}
            <div
                class="item"
                style="position: relative; display: {$currentIndex === i ? 'block' : 'none'};"
            >
                <img
                    class="slide {i === $currentIndex ? 'active' : ''}"
                    src={image.path}
                    alt={`Slide ${i + 1}`}
                />
            </div>
        {/each}
    </div>
</div>

This piece of code showcases my work in action.

My goal is for the website to load smoothly without any flickering when transitioning between images.

typescript sveltekit

Answer 1

Answer №1

It's important to note that when all images are added to the DOM and begin loading simultaneously, it can lead to wasted bandwidth and potential delays in displaying the current image.

To avoid this issue, consider rendering only the current image instead of using an #each loop.

In the provided example, there is no need for currentIndex to be a store or for interval to be declared outside of the onMount function.

The initial image may not always load first, but you can ensure subsequent images are loaded before transitioning to the next slide by utilizing the Image constructor to preload the source.

Instead of using an interval, consider implementing timeouts which prevent premature switching if loading takes longer than anticipated.

onMount(() => {
    const loadImage = item => new Promise((resolve, reject) => {
        const image = new Image();
        image.onload = () => resolve();
        image.onerror = () => reject();
        image.src = item.path;
    });

    let timeout;
    let destroyed = false;

    const nextSlide = async () => {
        const nextIndex = (currentIndex + 1) % images.length;
        await loadImage(images[nextIndex]);
        currentIndex = nextIndex;

        if (!destroyed)
            timeout = setTimeout(nextSlide, 3000);
    }

    timeout = setTimeout(nextSlide, 3000);

    return () => {
        clearTimeout(timeout);
        destroyed = true;
    };
});

If you still require currentIndex to be a store, simply use $currentIndex directly without the need to call set() or update().

The loaded Image can also be inserted into the DOM upon loading by incorporating the slide-switching functionality as a Svelte action, passed with the corresponding DOM node.

Alternatively, you can add on:load directly to the <img> element in the markup, but it must coordinate with the timing logic for slides. One approach is storing a promise on each image and resolving it:

<script>
  // ...

  const deferred = () => {
    let funcs;
    const promise = new Promise((resolve, reject) => funcs = { resolve, reject });
    return Object.assign(promise, funcs);
  };

  // Potential SSR issues
  const images = [...].map(x => ({ ...x, loaded: deferred() }));

  let currentIndex = 0;

  onMount(() => {
    let timeout;
    let destroyed = false;
    const nextSlide = async () => {
      const nextIndex = (currentIndex + 1) % images.length;
      await images[nextIndex].loaded;
      currentIndex = nextIndex;

      if (!destroyed) timeout = setTimeout(nextSlide, 3000);
    };
    timeout = setTimeout(nextSlide, 3000);

    return () => {
      clearTimeout(timeout);
      destroyed = true;
    };
  });
</script>

...
<img ...
     on:load={() => image.loaded.resolve()} />

This method relies on the assumption that the next image is already in the DOM to trigger its loading.

Answer 2

It's important to note that when all images are added to the DOM and begin loading simultaneously, it can lead to wasted bandwidth and potential delays in displaying the current image.

To avoid this issue, consider rendering only the current image instead of using an #each loop.

In the provided example, there is no need for currentIndex to be a store or for interval to be declared outside of the onMount function.

The initial image may not always load first, but you can ensure subsequent images are loaded before transitioning to the next slide by utilizing the Image constructor to preload the source.

Instead of using an interval, consider implementing timeouts which prevent premature switching if loading takes longer than anticipated.

onMount(() => {
    const loadImage = item => new Promise((resolve, reject) => {
        const image = new Image();
        image.onload = () => resolve();
        image.onerror = () => reject();
        image.src = item.path;
    });

    let timeout;
    let destroyed = false;

    const nextSlide = async () => {
        const nextIndex = (currentIndex + 1) % images.length;
        await loadImage(images[nextIndex]);
        currentIndex = nextIndex;

        if (!destroyed)
            timeout = setTimeout(nextSlide, 3000);
    }

    timeout = setTimeout(nextSlide, 3000);

    return () => {
        clearTimeout(timeout);
        destroyed = true;
    };
});

If you still require currentIndex to be a store, simply use $currentIndex directly without the need to call set() or update().

The loaded Image can also be inserted into the DOM upon loading by incorporating the slide-switching functionality as a Svelte action, passed with the corresponding DOM node.

Alternatively, you can add on:load directly to the <img> element in the markup, but it must coordinate with the timing logic for slides. One approach is storing a promise on each image and resolving it:

<script>
  // ...

  const deferred = () => {
    let funcs;
    const promise = new Promise((resolve, reject) => funcs = { resolve, reject });
    return Object.assign(promise, funcs);
  };

  // Potential SSR issues
  const images = [...].map(x => ({ ...x, loaded: deferred() }));

  let currentIndex = 0;

  onMount(() => {
    let timeout;
    let destroyed = false;
    const nextSlide = async () => {
      const nextIndex = (currentIndex + 1) % images.length;
      await images[nextIndex].loaded;
      currentIndex = nextIndex;

      if (!destroyed) timeout = setTimeout(nextSlide, 3000);
    };
    timeout = setTimeout(nextSlide, 3000);

    return () => {
      clearTimeout(timeout);
      destroyed = true;
    };
  });
</script>

...
<img ...
     on:load={() => image.loaded.resolve()} />

This method relies on the assumption that the next image is already in the DOM to trigger its loading.

Preventing image flickering in SvelteKit: A guide

Answer №1

Similar questions

When trying to upload a file with ng-upload in Angular, the error 'TypeError: Cannot read properties of undefined (reading 'memes')' is encountered

What is the process of 'initializing' an object in TypeScript?

Incorporate dynamic HTML snippets into the DOM with Angular 4

Retrieve information from an XML document

Display the concealed mat-option once all other options have been filtered out

Jasmine has detected an undefined dependency

Can you explain the distinction between the controls and get methods used with the FormGroup object?

TypeORM: establishing many-to-one relationships between different types of entities

Generating and setting an object property in TypeScript at runtime

The TypeScript compiler throws an error when encountering nulls in conjunction with the isNull function

TS1316 Error: You can only have global module exports at the top level of the file

Vanilla JavaScript error: Unable to access property

You cannot assign type void to type any

Error in Angular 5: Google Maps not defined

Error: An unauthorized attempt was made to modify property settings for certain users, which are designated as read-only

Incorporating data from an api call to establish the starting state of a react component

Empty Angular-chart.js Container

Leveraging Shared Modules Component across multiple modules in Angular can enhance code re

Troubleshooting Next.js Mobile Freeze Issue: Unresponsive Scroll After Page Transition

Encountering TypeScript errors when trying to reference Angular2 within a Gulp setup