Question

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

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

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

您可以在http://jsfiddle.net/bRgTv/

查看我的游戏

您可以在http://dursigns.com/misc/puzzle/js/puzzle.js

查看我的代码

同样在玩我的游戏时，可拖动的块有时彼此之间有大约1-2px的间隙。如果有人能引导我朝着更好的方向去修理它，我会非常感激。

Answer 1

我想通了

 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();
                });

到目前为止查看我的游戏http://dursigns.com/misc/puzzle

麻烦加载图像/ Jquery拖动;下降

1 个答案: