Javascript 加载图像/Jquery拖放时出现问题&；滴

我目前正在编写自己的拖放益智游戏。我将其设置为只需指定所需行数/列数和图像源即可

<script type="text/javascript">
    $('#container').puzzle(3,'/images/guitar.jpg');
</script>

$（'#container'）.puzzle（3，'/images/guitar.jpg'）；

我遇到的问题是，当页面第一次加载时，拼图要么不在那里，要么被压平。但是，无论何时再次加载，它都可以正常工作。我很确定它不工作的原因是因为我的图像加载速度不够快，但我不知道如何修复它

你可以在这里观看我的比赛

您可以在以下位置查看我的代码：

此外，在玩我的游戏时，可拖动块之间有时会有大约1-2倍的间隙。如果有人能引导我朝着更好的方向去解决这个问题，我将不胜感激。

我找到了答案

 var img      = $("<img/>").attr({
                    "src": source,
                    'class': 'img'
                })
                .load(function() {
                    w       = this.width;
                    h       = this.height;                      
                    width   = cont.width();
                    rem     = width%size;

                    if(!once){
                        if(rem > 0){                            
                            width  = cont.width() - rem;
                        }else{
                            width  = cont.width();                              
                        }
                        height = width/(w/h);
                        $(cont).prepend(img);
                        $(cont).append('<ul id="inner" style="width:'+width+'px; margin: 0 auto;" />');
                        $('#inner').css({
                            'width': width,
                            'min-height': height
                        });
                    }
                    once = true;
                    $(this).hide();
                });

var img=$（“0”）{
宽度=连续宽度（）-rem；
}否则{
宽度=连续宽度（）；
}
高度=宽度/（w/h）；
$（续）预编（img）；
$（续）追加（'
'）；
$（“#内部”）.css({
“宽度”：宽度，
“最小高度”：高度
});
}
一次=真；
$（this.hide（）；
});

到目前为止，请查看我的游戏