PrismicImage lazy loading Svelte

Developing with Prismic
,
1

I have an issue with handling images with slow internet connection in svelte app using prismic library
I've tried to use on:load like this

<script>
  import { PrismicImage } from '@prismicio/svelte'

  const a = () => {
    console.log(1)
  }
</script>
<PrismicImage
        on:load={a}
        on:loadeddata={()=>console.log(1)}
        on:loadedmetadata={()=>console.log(1)}
        loading='lazy'
        style="position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 3rem; -webkit-clip-path: url(#{pathID}); clip-path: url(#{pathID});"
        {field}
        imgixParams={{ q: 30 }}
      />

but there is no any reaction on load and I do not really see any difference if I have loading='lazy'

Is there any solution to handle image loading if user has slow internet connection

2

Hi Jakub,

These aren't accepted inputs for the svelte kit's prismicImage component:

You can submit this as an improvement request on the kit's GitHub:

For now, you can use the following plugin for lazy loading:

Just pass your image URLs directly.

1 Like