HTTPリクエストが発生したときにイメージをロードする方法

Question

私はelm architecture.butを使用してHTTPサービスリクエストを実装しました。また、何かロード中のgifイメージを実装して、

この実装に実装するのに手伝ってください。

Answer 1

ボディに読み込み用のGIFイメージを追加し、Z-indexでページの上部に表示させることができます.HTTPリクエストが完了した後、本文からそのイメージを削除します。

Answer 2

モデルの読み込みの有無にかかわらず、モデルにプロパティを追加できます。 次に、あなたのviewに表示スピナーやテキストなどのステータスを反映させることができます。

http exampleでの例の場合

、あなたは、この例ではModel ...

でiswaitingプロパティを追加することによって、例えば、次のコード を変更することができますAJAX呼び出しが完了すると、FetchSucceedメッセージがトリガーされます。

type alias Model = 
    { topic : String 
    , gifUrl : String 
    , iswaiting : Bool 
    } 

update : Msg -> Model -> (Model, Cmd Msg) 
update msg model = 
    case msg of 
    MorePlease -> 
     ({ model | iswaiting = True }, getRandomGif model.topic) 

    FetchSucceed newUrl -> 
     (Model model.topic newUrl False, Cmd.none) 

    FetchFail _ -> 
     (model, Cmd.none) 

view : Model -> Html Msg 
view model = 
    div [] 
    [ h2 [] [text model.topic] 
    , text <| if model.iswaiting then "waiting" else "" 
    , button [ onClick MorePlease ] [ text "More Please!" ] 
    , br [] [] 
    , img [src model.gifUrl] [] 
    ] 

他の部分も調整する必要があります。 しかし、何が起こっているのかを見ることができれば幸いです。