javascript - Loading image in random position on page load -

i working on portfolio website design work , running small problem.

i'm trying load images in random positions , use dragabilly make images draggable.

at times images end in top corner if position not defined. dragging around still works. suspect not having images loaded before executing script, not sure.

my site live here

and here i'm using...

$ -> $('#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': * 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 

example image

so problem images cached browser. thing, means onload event won't triggered images. instead have check if image loaded when assign callback.

to check if image loaded before js executes, can use complete property (mdn).

    $.each _.shuffle($img), (i, e) ->       callback = ->         rm = wh - $(e).height()         $(e).css             'left': * wl + (math.random() - .75) * 96             'top': wdoh + math.random() * rm        # if image isn't cached, onload fire       e.onload = callback       # if image cached in browser, , therefore       # loaded, can run callback       callback() if e.completed