Question

我正在尝试用javascript创建一个益智游戏。我正在从网址抓取拼图的图像并将其加载到主div中。但是当我加载网页时，它需要一秒钟，直到所有内容都正确加载。我怎样才能让它看起来更流畅？

由于

启动时出现错误的网页：

http://www.acsu.buffalo.edu/~jamesber/GameOne.html#

我的代码：

 $(function (){

 var plant = "";

$.ajax({"url":"http://beta.botanicalapp.com/api/v1/plants/?photo=true"})
.success(function(fullData){
        plant = fullData[2].plant.image_default.url;

        $("#puzzle div").css({'background-image':'url('+ plant +')'});
        $("#helper").attr("src",plant);
        var puzzle = $("#puzzle");
        var pieces = $("#puzzle div");

            pieces.sort(function (a, b) {
                var temp = parseInt(Math.random() * 100);
                var isOddOrEven = temp % 2;
                var isPosOrNeg = temp > 5 ? 1 : -1;
                return (isOddOrEven * isPosOrNeg);
            }).appendTo(puzzle);

        var timer;
        var secs = 0;
        var mins = 0;
        var millsecs = 0;
        var timeString = document.getElementById("time");
        timeString.innerHTML = "00:00:00";

        function update(){
            if(millsecs == 100) {
                secs++;
                millsecs = 0;
                if(secs == 60){
                    mins++;
                    secs = 0;
                }
            } 
            else {
                millsecs++;
            }
            if((millsecs<10) && (secs<10) && (mins<10)) {
        timeString.innerHTML = '0' + mins + ':0' + secs + ':0' + millsecs;
            }
            else if ((millsecs<10) && (secs<10)) {
        timeString.innerHTML = mins + ':0' + secs + ':0' + millsecs;
            }
            else if ((millsecs<10) && (mins<10)) {
        timeString.innerHTML = '0' + mins + ':' + secs + ':0' + millsecs;
            }
            else if((secs<10) && (mins<10)){
        timeString.innerHTML = '0' + mins + ':0' + secs + ':' + millsecs;
            } 
            else if (millsecs<10) {
            timeString.innerHTML = mins + ':' + secs + ':0' + millsecs;
            }
            else if (secs<10){
            timeString.innerHTML = mins + ':0' + secs + ':' + millsecs;
            } 
            else if (mins<10) {
        timeString.innerHTML = '0' + mins + ':' + secs + ':' + millsecs;
            } 
            else {
            timeString.innerHTML = mins + ':' + secs + ':' + millsecs;
            }   
        }

        function start(){
            timer = setInterval(function() {update()}, 10);
        }

        start();    
        initSwap();

        function initSwap() {
            initDroppable($("#puzzle div"));
            initDraggable($("#puzzle div"));
        }


        function initDraggable($elements) {
            $elements.draggable({
                appendTo: "body",
                helper: "clone",
                cursor: "move",
                revert: "invalid"
            });
        }

        $("#final").dialog({
            autoOpen: false,
            modal: true,
            width: 900,
            resizable: false,
            height: 520,
            position: [250,75],
            dialogClass: "fixed-dialog",
            draggable: false
        });

        function initDroppable($elements) {
            $elements.droppable({
                activeClass: "ui-state-default",
                hoverClass: "ui-drop-hover",
                accept: ":not(.ui-sortable-helper)",
                over: function (event, ui) {
                    var $this = $(this);
                },
                drop: function (event, ui) {
                    var $this = $(this);
                    var linew1 = $(this).after(ui.draggable.clone());
                    var linew2 = $(ui.draggable).after($(this).clone());
                    $(ui.draggable).remove();
                    $(this).remove();
                    initSwap();
                    var finished = "1,2,3,4,5,6,7,8,9";
                    var started = '';
                    $("#puzzle div").each(function(){
                        var image = $(this).attr("id");
                started += image.replace("recordArr_","")+",";
                        });
                started = started.substr(0(started.length)-1);
                        if(started == finished){
                            clearTimeout(timer);
                    $("#thePlant").attr("src",plant);
                            $("#final").dialog("open");
                        }
                }
            });
        }
});
 });

Answer 1

一切都发生在Ajax调用的success / done回调中。

即使图像被缓存或类似的东西，你仍然有开销：

建立HTTP连接
请求资源
收到回复
关闭连接

这就是启动时滞后的原因。

您应该启动Ajax调用并使用图像处理响应，而不是呈现页面的其余部分。

P.S。
您应该将.success切换为.done，因为jQuery的新（呃）延迟对象更喜欢它，而旧方法是deprecated：

弃用注意：自jQuery 1.8起，不推荐使用jqXHR.success（），jqXHR.error（）和jqXHR.complete（）回调。要准备最终删除的代码，请使用jqXHR.done（），jqXHR.fail（）和jqXHR.always（）。

Javascript游戏加载缓慢

1 个答案: