Asynchronously load images with Stimulus.js. Also supports media queries.

galleries.html.erb

<% # I have a slide contains 6 images. %>
<% # And also I have different versions of them based on media queries. %>
<% # We can load the 2nd to 6th images asynchronously. %>
<% (2..6).each do |num| %>
	<div data-controller="preload-img" data-preload-img-src-value='<%= asset_path("slides/pc/#{num}.jpg") %>' data-preload-img-media-value="(min-width: 992px)"></div>
	<div data-controller="preload-img" data-preload-img-src-value='<%= asset_path("slides/mobile/#{num}.jpg") %>' data-preload-img-media-value="(max-width: 991px)"></div>
<% end %>

preload_img_controller.js

import { Controller } from "@hotwired/stimulus"

// Connects to data-controller="preload-img"
export default class extends Controller {
  static values = {
    src: String,
    media: String
  }
  
  connect() {
    if (this.hasMediaValue) {
      if (window.matchMedia(this.mediaValue).matches) {
        this.preloadImg()
      }
    } else {
      this.preloadImg()
    }
  }

  preloadImg() {
    let img = document.createElement('img')
    img.src = this.srcValue
  }
}