How do I pre-load a list of images in Fable F#?

Question

I'm fairly new to both F# and Fable. I have the following code in JavaScript to load up some images and then do stuff with them when they're all loaded:

async function start() {
  async function loadImages(files) {
    let promises = files.map(filename => {
      return new Promise((resolve, reject) => {
        const img = new Image();
        img.src = filename;
        img.onload = () => resolve(img);
      })
    });
    return Promise.all(promises);
  }

  const images = await loadImages(imageFileNames);
  // Do stuff with images
  console.log('images loaded', images);
}
start();

How would I go about writing this in F# for use in Fable?

I'm using the Fable Simple Template (which I believe is Fable 1.x not the new version 2?)

I'm guessing I don't really need to use async and could just write my own promise-like-ish callback hander? Seems a bit overcomplicated though. — Alf Nathan, Sep 30 '18 at 14:16
Why the downvote? This is my first question so I'd like to know what I could improve. — Alf Nathan, Sep 30 '18 at 20:35
I went ahead and reworded the question to make it more specific. — Alf Nathan, Oct 06 '18 at 07:16

score 1 · Accepted Answer · answered Sep 30 '18 at 20:14

This is what I've come up with, which does the job although I'm sure there's a nicer way:

let loadImages imageFileNames callback =
    let mutable remaining : int = (imageFileNames |> List.length) - 1

    let imagesWithNames =
        imageFileNames
        |> List.map (fun fileName ->
            let img = Browser.document.createElement_img()
            fileName,img
        )

    let images =
        imagesWithNames
        |> List.map (fun (_,img) -> img)

    for (fileName, img) in imagesWithNames do
        img.onload <- (fun _ ->
            if remaining > 0 then
                remaining <- remaining - 1
            else
                callback(images)
            ())
        img.src <- fileName
    ()

// Use with a callback, e.g.
let imageFileNames = [ "grass.png" ; "hedge.png" ];
loadImages imageFileNames (fun images -> printfn "%A" images)

This was inspired/copied from this javascript version: https://stackoverflow.com/a/41170913

How do I pre-load a list of images in Fable F#?

1 Answers1