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

Question

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

默认情况下，只看到一小部分(4 个拇指)，但可以通过单击“voir toute les photos”预览所有拇指

running example here

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

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

灯箱在加载下一张时显示最后显示的图片，并突然转换。

有没有办法仅在加载下一张图片时触发模型的更改？

还是一种更惯用的方式来做这种事情？一般来说，我对榆树和网络开发很陌生。

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

Answer 1

听起来您只需要一种方法来知道最终何时加载图像。您可以绑定(bind)到 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 Action ，将图像源作为字符串传递。

img
    [ src imgsrc
    , onLoadSrc ImageLoaded
    ]
    []

看 demo和 code (您可能需要更改图像 url 中的随机数以对抗浏览器缓存图像)。