Random YES/NO image preload https://ellie-app.com/nqzfPPfPxGZa1

ImagePreload.elm

module Main exposing (main)

import Browser
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Html.Keyed
import Http
import Json.Decode exposing (Decoder, field, string, dict, map2)



-- MAIN


main =
  Browser.element
    { init = init
    , update = update
    , subscriptions = subscriptions
    , view = view
    }



-- MODEL

type ImgLoad
  = Idle
  | Failure
  | Loading
  | Success String

type Msg
  = NoOp
  | MorePlease
  | ImgLoaded
  | GotGif (Result Http.Error ApiData)

type alias ApiData =
  { answer : String
  , image : String
  }

type alias Model =
  { img : ImgLoad
  , show_img : Bool
  , answer : String
  }

init : () -> (Model, Cmd Msg)
init _ =
  ( Model
      Idle
      False
      ""
  , Cmd.none
  )



-- UPDATE


update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
  case msg of
    NoOp ->
      ( model, Cmd.none )

    ImgLoaded ->
      ( { model | show_img = True }, Cmd.none )

    MorePlease ->
      ( { model
        | img = Loading
        , show_img = False
        }
      , getRandomYesNoGif
      )

    GotGif result ->
      case result of
        Ok url ->
          ( { model
            | img = Success url.image
            , answer = url.answer
            }
          , Cmd.none
          )

        Err _ ->
          ( { model | img = Failure }
          , Cmd.none
          )



-- SUBSCRIPTIONS


subscriptions : Model -> Sub Msg
subscriptions model =
  Sub.none



-- VIEW


view : Model -> Html Msg
view model =
  div []
    [ h2 [] [ text "Yes or No?" ]
    , pre [ style "white-space" "pre-wrap" ] [ text <| Debug.toString model ]
    , viewGif model
    ]


viewGif : Model -> Html Msg
viewGif model =
  let
    imgtag : String -> Html Msg
    imgtag url =
      img
        [ src url
        , style "display" imgdisplay
        , style "width" "400px"
        , on "load" (Json.Decode.succeed ImgLoaded)
        ]
        []

    imgdisplay = if model.show_img then "block" else "none"
    imgtxtdisplay = if model.show_img then "none" else "block"
    
    imgtxt =
      div
        [ style "display" imgtxtdisplay ]
        [ text "Loading image..." ]
    
    rawtxt =
      div
        []
        [ text ("Answer = " ++ model.answer) ]
  in
    case model.img of
      Idle ->
        div []
          [ div []
              [ text "Click the button to get an image" ]
          , div []
              [ button [ onClick MorePlease ] [ text "Button" ] ]
          ]

      Failure ->
        div []
          [ text "I could not load a random cat for some reason. "
          , button [ onClick MorePlease ] [ text "Try Again!" ]
          ]

      Loading ->
        text "Getting image from the API..."

      Success url ->
        Html.Keyed.node
          "div"
          []
          [ ("Button", button [ onClick MorePlease, style "display" "block" ] [ text "More Please!" ])
          , ("RawTxt", rawtxt)
          , ("Img", imgtag url)
          , ("Caption", imgtxt)
          ]



-- HTTP


getRandomYesNoGif : Cmd Msg
getRandomYesNoGif =
  Http.get
    { url = "https://yesno.wtf/api"
    , expect = Http.expectJson GotGif gifDecoder
    }


gifDecoder : Decoder ApiData
gifDecoder =
  map2 ApiData
    (field "answer" string)
    (field "image" string)