<p>I have an overview (i.e. list with around 150 items). Each of those items has an appropriate "teaser image". When a user is hovering a list item the appropriate teaser image fades in, on mouse out it fades out again.</p>

<p>As I didn't want to add all images into the page on load I am doing that effect with JS and loading the image url I've attached to each html list item as data-attribute, e.g.</p>

<pre><code>//html
&lt;a data-image="{{ asset.getUrl() }}"&gt;Item Title&lt;/a&gt;

// js
link.addEventListener("mouseover", () =&gt; {
  image.setAttribute("src", imageUrl)
})
</code></pre>

<p>My problem is that I can't apply an image transform now as the image is not "generated" on page load but on hover only. Is there any way of applying an image transform in such a scenario?
<em>(I think I know the answer as the asset is coming from the server via JS and its url and not via rendering on load)</em></p>

<p>Or would you simply recommend a using a plugin and applying the transform in the CP?</p>

CC BY-SA 4.0
2020-02-24T21:59:37.983Z
Couldn't you use https://docs.craftcms.com/v3/config/config-settings.html#generatetransformsbeforepageload and set it to `true` to ensure they exist on page load?
Brad Bell
CC BY-SA 4.0
2020-02-25T15:49:43.963Z
Thanks @BradBell. Yeah but if they exist on load I would need to load all images on page load (and we're talking about 150 high-res images).
Christoph Berger
CC BY-SA 4.0
2020-02-27T15:53:12.573Z
Maybe you could consider using the Imager X plugin: https://plugins.craftcms.com/imager-x, and / or the use of Imgix: https://www.imgix.com
Romain P.
CC BY-SA 4.0
2020-03-03T17:16:32.893Z
@RomainPoirier Thanks for the input. That's what I went for then.
Christoph Berger
<image-transforms><image>
Apply image transform after image is placed on page
# Apply image transform after image is placed on page

(Asked by: username_0 on 2020-02-20)

I have an overview (i.e. list with around 150 items). Each of those items has an appropriate "teaser image". When a user is hovering a list item the appropriate teaser image fades in, on mouse out it fades out again.
As I didn't want to add all images into the page on load I am doing that effect with JS and loading the image url I've attached to each html list item as data-attribute, e.g.
//html
Item Title

// js
link.addEventListener("mouseover", () => {
  image.setAttribute("src", imageUrl)
})

My problem is that I can't apply an image transform now as the image is not "generated" on page load but on hover only. Is there any way of applying an image transform in such a scenario?
(I think I know the answer as the asset is coming from the server via JS and its url and not via rendering on load)
Or would you simply recommend a using a plugin and applying the transform in the CP?

**Tags:** image-transforms, image

> **Comments:**
> **username_1**: Couldn't you use https://docs.craftcms.com/v3/config/config-settings.html#generatetransformsbeforepageload and set it to `true` to ensure they exist on page load?  
> **username_0**: Thanks @BradBell. Yeah but if they exist on load I would need to load all images on page load (and we're talking about 150 high-res images).  
> **username_2**: Maybe you could consider using the Imager X plugin: https://plugins.craftcms.com/imager-x, and / or the use of Imgix: https://www.imgix.com  
> **username_0**: @RomainPoirier Thanks for the input. That's what I went for then.  

---

## 0 answers

