Javascript 页面加载时在随机位置加载图像

我正在为我的设计工作在一个投资组合网站上工作，我遇到了一个小问题

我尝试在随机位置加载图像，然后使用Dragabilly使图像可拖动

有时，图像都会出现在上角，就好像它们的位置没有定义一样。拖拉仍然有效。我怀疑这与在执行脚本之前没有完全加载图像有关，但我不确定

我的网站是活的

这是我正在使用的

$ ->
$('#menu-button').on 'click', ->
    $('#menu').toggleClass 'closed'
    return

if $(window).width() > 960
    $img = $ '.work-imgs img'

    wdoh = $('.work-desc').outerHeight()
    wl = ($(window).width() - 384) / $img.length
    wh = $(window).height() - wdoh

    $.each _.shuffle($img), (i, e) ->
        e.onload = ->
            rm = wh - $(e).height()
            $(e).css
                'left': i * wl + (Math.random() - .75) * 96
                'top': wdoh + Math.random() * rm
            return
        return

    $d = $img.draggabilly()
    $d.on 'pointerDown', ->
        $d.css 'z-index', 0
        $(this).css 'z-index', 1
        return

return

---

所以问题在于，图像是由浏览器缓存的。这确实是一件好事，但这意味着不会为所有图像触发

onload

事件。相反，在分配回调时，您必须检查图像是否已加载

要在执行JS之前检查图像是否已加载，可以使用

complete

属性（）

---

第二行应该缩进，并且不与

$->

对齐，尽管我怀疑这是一个复制粘贴错误。。它在你的代码中吗？是的，复制粘贴错误，它在我的代码中缩进了。我可以告诉你什么不起作用：你绑定的

e.onload（）

事件没有为每一张图片触发。由于它们都在左上角装载，有些有时会留在那里。这可能是全局就绪

$->

和

onload

本身之间的竞争条件。我同意@arcaneraeda的观点，图像可以缓存，因此在JS执行之前加载，这意味着

onload

不会被触发@你说有时候会有用的。它在第一次尝试时起作用，然后停止吗？@LcLk正确，它在第一次尝试时起作用，之后就不起作用了。您认为缓存图像的最佳方法是什么？

    $.each _.shuffle($img), (i, e) ->
      callback = ->
        rm = wh - $(e).height()
        $(e).css
            'left': i * wl + (Math.random() - .75) * 96
            'top': wdoh + Math.random() * rm

      # if the image isn't cached, the onload will fire
      e.onload = callback
      # if the image is cached in the browser, and therefore already
      # loaded, you can run your callback immediately
      callback() if e.completed