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

Question

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

默认情况下只能看到一个小的选择(4个拇指),但可以通过点击"voir toute les photos"预览所有的拇指

在这里运行示例

每个用户单击或勾选时钟会更改基础模型,从而使浏览器相应地实现HTML.

我对目前的功能水平感到非常满意,除了事实上我还没有找到一种在下一张图片加载时显示转换屏幕(或图片)的方法.

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

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

或者更惯用的方式来做这种事情？我对榆树和网络开发很新.

图库的榆木代码见:https: //github.com/eniac314/mairieMurol/blob/master/src/Gallery.elm

Answer 1

听起来你只需要一种方法来了解最终加载图像的时间.您可以绑定到img.onloadDOM事件,但首先您需要一个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
    ]
    []

查看演示和代码(您可能需要更改图像URL中的随机数以对抗缓存图像的浏览器).