Body: <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>
  
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2020-02-24T21:59:37.983Z
Comments.Text: 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?
Comments.UserDisplayName: Brad Bell
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2020-02-25T15:49:43.963Z
Comments.Text: 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).
Comments.UserDisplayName: Christoph Berger
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2020-02-27T15:53:12.573Z
Comments.Text: 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
Comments.UserDisplayName: Romain P.
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2020-03-03T17:16:32.893Z
Comments.Text: @RomainPoirier Thanks for the input. That's what I went for then.
Comments.UserDisplayName: Christoph Berger
Tags: <image-transforms><image>
Title: Apply image transform after image is placed on page
ThreadText: # 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
  <a data-image="{{ asset.getUrl() }}">Item Title</a>
  
  // 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 @username_1. 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
  
  