track onLoad events for <img> tags to know when to fade in

jerith666 · Feb 10, 2021 · 3da7a82 · 3da7a82
1 parent 67b35b3
commit 3da7a82
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 33 deletions.
diff --git a/src/client/AlbumPage.elm b/src/client/AlbumPage.elm
@@ -17,7 +17,7 @@ import Url exposing (Url)
 import Utils.AlbumUtils exposing (..)
 import Utils.KeyboardUtils exposing (onEscape)
 import Utils.ListUtils exposing (..)
-import Utils.Loading exposing (ManyModel, ManyMsg, cmdForMany, initMany, subscriptionsMany, updateMany)
+import Utils.Loading exposing (ManyModel, ManyMsg, cmdForMany, initMany, markOne, subscriptionsMany, updateMany)
 import Utils.LocationUtils exposing (AnchorFunction)
 import Utils.ResultUtils exposing (..)
 import Utils.TouchUtils as TU exposing (..)
@@ -65,6 +65,7 @@ type AlbumPageMsg
     | ImgPositionFailed Browser.Dom.Error
     | GotImgPosition Element
     | LoadingMsg ManyMsg
+    | ThumbLoaded Url
     | NoUpdate
 
 
@@ -262,6 +263,14 @@ update msg model scroll =
                     in
                     ( FullImage { fi | imageLoader = newLoadingModel }, newLoadingCmd )
 
+        ThumbLoaded url ->
+            case model of
+                Thumbs t ->
+                    ( Thumbs { t | imageLoader = markOne t.imageLoader url }, Cmd.none )
+
+                FullImage fi ->
+                    ( FullImage { fi | imageLoader = markOne fi.imageLoader url }, Cmd.none )
+
         NoUpdate ->
             ( model, Cmd.none )
 
@@ -388,6 +397,7 @@ view albumPage a scrollMsgMaker showList wrapMsg parents flags =
                 a
                 scrollMsgMaker
                 (\x -> \y -> \z -> wrapMsg (View x y z))
+                (ThumbLoaded >> wrapMsg)
                 showList
                 { album = th.album
                 , parents = parents

diff --git a/src/client/AlbumStyles.elm b/src/client/AlbumStyles.elm
@@ -7,7 +7,6 @@ import Html.Styled exposing (..)
 import Html.Styled.Attributes exposing (css)
 import Html.Styled.Events exposing (..)
 import Json.Decode exposing (..)
-import Time exposing (..)
 import Utils.LocationUtils exposing (AnchorFunction)
 
 
@@ -42,13 +41,8 @@ type alias MainAlbumFlags =
 
 
 type ImgLoadState
-    = Requested
-    | Partial ( Int, Maybe Int ) --bytes loaded, maybe total bytes
-      -- | Aborted
-      -- | Failed
-    | Completed
-    | Shown --not really a state, a bit of a hack
-    | Disappearing --not really a state, a bit of a hack
+    = ImgFetched
+    | ImgLoaded
 
 
 {-| this prevents "bouncy" scrolling on iOS, as recommended at
@@ -131,21 +125,12 @@ rootDivFlex flags dir scrollMsgMaker viewport extraStyles =
 opacityStyles : ImgLoadState -> List Style
 opacityStyles imgLoadedState =
     case imgLoadedState of
-        Requested ->
+        ImgFetched ->
             [ Css.opacity <| num 0 ]
 
-        Partial int ->
-            [ Css.opacity <| num 0 ]
-
-        Completed ->
+        ImgLoaded ->
             opacityAnimatedTo 1
 
-        Shown ->
-            [ Css.opacity <| num 1 ]
-
-        Disappearing ->
-            opacityAnimatedTo 0
-
 
 opacityDurationMillis : Float
 opacityDurationMillis =

diff --git a/src/client/ThumbPage.elm b/src/client/ThumbPage.elm
@@ -5,8 +5,10 @@ import AlbumStyles exposing (..)
 import Browser.Dom exposing (..)
 import Css exposing (..)
 import Html.Styled exposing (..)
+import Html.Styled.Events exposing (on)
 import Http exposing (Progress(..))
 import ImageViews exposing (..)
+import Json.Decode as Decoder
 import String exposing (fromInt)
 import Url exposing (Url)
 import Utils.HttpUtils exposing (appendPath)
@@ -40,8 +42,8 @@ grey =
     rgb 128 128 128
 
 
-view : AnchorFunction msg -> (Viewport -> msg) -> (List Image -> Image -> List Image -> msg) -> (AlbumList -> msg) -> ThumbPageModel msgB -> MainAlbumFlags -> Html msg
-view a scrollMsgMaker imgChosenMsgr showList thumbPageModel flags =
+view : AnchorFunction msg -> (Viewport -> msg) -> (List Image -> Image -> List Image -> msg) -> (Url -> msg) -> (AlbumList -> msg) -> ThumbPageModel msgB -> MainAlbumFlags -> Html msg
+view a scrollMsgMaker imgChosenMsgr loadedMsg showList thumbPageModel flags =
     rootDivFlex
         flags
         column
@@ -60,7 +62,7 @@ view a scrollMsgMaker imgChosenMsgr showList thumbPageModel flags =
                 , flexShrink <| num 0
                 ]
             ]
-            (viewThumbs a imgChosenMsgr thumbPageModel)
+            (viewThumbs a imgChosenMsgr loadedMsg thumbPageModel)
         ]
 
 
@@ -168,8 +170,8 @@ urlsToGet thumbPageModel =
         List.map (.url >> encodePath >> appendPath thumbPageModel.baseUrl) prioritySrcs
 
 
-viewThumbs : AnchorFunction msg -> (List Image -> Image -> List Image -> msg) -> ThumbPageModel msgB -> List (Html msg)
-viewThumbs a imgChosenMsgr thumbPageModel =
+viewThumbs : AnchorFunction msg -> (List Image -> Image -> List Image -> msg) -> (Url -> msg) -> ThumbPageModel msgB -> List (Html msg)
+viewThumbs a imgChosenMsgr loadedMsg thumbPageModel =
     let
         ( maxCols, thumbWidth ) =
             colsWidth thumbPageModel.bodyViewport
@@ -181,6 +183,7 @@ viewThumbs a imgChosenMsgr thumbPageModel =
         (viewThumbColumn a
             thumbWidth
             (convertImgChosenMsgr thumbPageModel.album.imageFirst imgs imgChosenMsgr)
+            loadedMsg
             thumbPageModel.imageLoader
             thumbPageModel.baseUrl
         )
@@ -221,8 +224,8 @@ convertImgChosenMsgr image1 images prevCurRestImgChosenMsgr =
         prevCurRestImgChosenMsgr prev cur next
 
 
-viewThumbColumn : AnchorFunction msg -> Int -> (Int -> msg) -> ManyModel msgB -> Url -> List ( Image, Int ) -> Html msg
-viewThumbColumn a thumbWidth imgChosenMsgr imageLoader baseUrl images =
+viewThumbColumn : AnchorFunction msg -> Int -> (Int -> msg) -> (Url -> msg) -> ManyModel msgB -> Url -> List ( Image, Int ) -> Html msg
+viewThumbColumn a thumbWidth imgChosenMsgr loadedMsg imageLoader baseUrl images =
     let
         viewThumbTuple ( img, i ) =
             let
@@ -238,17 +241,17 @@ viewThumbColumn a thumbWidth imgChosenMsgr imageLoader baseUrl images =
                 srcLoadState =
                     case loadState of
                         Just Loaded ->
-                            Just <| Partial ( 99, Nothing )
+                            Just ImgFetched
 
                         Just (Marked Loaded) ->
-                            Just Completed
+                            Just ImgLoaded
 
                         _ ->
                             Nothing
             in
             case srcLoadState of
                 Just opacity ->
-                    viewThumb a thumbWidth opacity [] (imgChosenMsgr i) img
+                    viewThumb a thumbWidth opacity [] (imgChosenMsgr i) (loadedMsg srcUrl) img
 
                 Nothing ->
                     stubThumb thumbWidth img loadState
@@ -344,11 +347,19 @@ srcForWidth width img =
     smallestImageBiggerThan xScaled yScaled img.srcSetFirst img.srcSetRest
 
 
-viewThumb : AnchorFunction msg -> Int -> ImgLoadState -> List Style -> msg -> Image -> Html msg
-viewThumb a width opasity extraStyles selectedMsg img =
+viewThumb : AnchorFunction msg -> Int -> ImgLoadState -> List Style -> msg -> msg -> Image -> Html msg
+viewThumb a width opasity extraStyles selectedMsg loadedMsg img =
     let
         ( xScaled, yScaled ) =
             sizeForWidth width img
+
+        onLoadAttr =
+            case opasity of
+                ImgFetched ->
+                    [ on "load" <| Decoder.succeed loadedMsg ]
+
+                ImgLoaded ->
+                    []
     in
     a selectedMsg
         []
@@ -361,7 +372,7 @@ viewThumb a width opasity extraStyles selectedMsg img =
                 ++ opacityStyles opasity
                 ++ extraStyles
             )
-            []
+            onLoadAttr
         ]