在榆树中制作图片滑块，由加载的元素触发模型更新

Question

我正在用 elm 制作一个网站，其中包含一个用于浏览图片的动态元素。可以单击给定的拇指以查看灯箱中的完整图片、导航到下一张或上一张图片或让图片每三秒自动更改一次。

默认情况下只能看到一小部分（4 个缩略图），但可以通过单击 "voir toute les photos"

预览所有缩略图

running example here

每次用户点击或滴答时钟都会改变底层模型，这反过来又使浏览器相应地实现 HTML。

我对当前的功能水平很满意，除了我找不到在加载下一张图片时显示过渡屏幕（或图片）的方法。

灯箱在加载下一张时显示上一张显示的图片，并突然过渡。

有没有办法只在加载下一张图片时触发模型的变化？

或者更惯用的方式来做这类事情？总的来说，我对榆树和网络开发还很陌生。

画廊的榆树代码可见于： https://github.com/eniac314/mairieMurol/blob/master/src/Gallery.elm

Answer 1

听起来您只需要一种方法来了解图像何时最终加载。您可以绑定到 img.onload DOM 事件，但首先您需要一个 Json 解码器从事件中提取图像 src 属性。

更新到 elm-0.18

onLoadSrc : (String -> msg) -> Html.Attribute msg
onLoadSrc tagger =
    on "load" (JD.map tagger targetSrc)

targetSrc : JD.Decoder String
targetSrc =
    JD.at [ "target", "src" ] JD.string

现在您可以使用该解码器调用新的 ImageLoaded String 操作，将图像源作为字符串传递。

img
    [ src imgsrc
    , onLoadSrc ImageLoaded
    ]
    []

看demo and code（可能需要更改图片中的随机数url来对抗浏览器缓存图片）

在榆树中制作图片滑块，由加载的元素触发模型更新

making a picture slider in elm, model updates triggered by loaded element

elm