Question

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

默认情况下，只能看到一个小的选择（4个拇指）但是可以通过点击“voir toute les photos”来预览所有的拇指

running example here

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

我对目前的功能水平感到非常满意，除了事实上我在下一张图片加载时找不到显示转换屏幕（或图片）的方法。

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

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

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

图库的elm代码显示在： 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和code（您可能需要更改图片网址中的随机数以对抗缓存图片的浏览器。）

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

1 个答案: