Question

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

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

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

我的网站正常here

这就是我正在使用的......

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

Example image

Answer 1

所以问题是图像是由浏览器缓存的。嗯，这确实是一件好事，但这意味着onload事件不会被所有图像触发。相反，您必须在分配回调时检查图像是否已加载。

要在JS执行之前检查图像是否已加载，您可以使用complete属性（mdn）。

    $.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

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

1 个答案: