Question

这是我正在制作益智游戏的网页：

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

如果你看一下它，继续刷新页面，加载所有组件需要一两秒钟。

我认为这是ajax加载缓慢，但我不认为是这样。有人请帮忙！谢谢！

我的javascript代码：

     <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>Untitled Document</title>
   <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes   /smoothness/jquery-ui.css" />
 <style>
 #puzzle {
width: 450px;
height: 450px;
outline: 4px solid black;
padding: 0px;
-webkit-padding-start: 0px;
margin-left:440px;
margin-right:auto;
margin-top:-205px;
 }

  .helper {
width: 200px;
height: 200px;
border: 1px solid black;
margin: 0px;
 }

  .piece {
float: left;
display: block;
width: 148px;
height: 148px;
border: 1px solid black;
margin: 0px;
background-size: 450px 450px;
background-repeat:no-repeat;
 }
 .piece span {
display:inline-block;
border:1px solid #FFFFFF;
color: #B80000;
display: none;
 }

 .ui-dialog .ui-dialog-title {
 text-align: center;
 width: 100%;
 }

 </style>
 <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.js"></script>
 <script type="text/javascript">

   $(function () {

var plant = "";

$.when($.ajax({"url":"http://botanicalapp.com/api/v1/plants/?photo=true"}))
.done(function(fullData){
    (function(){
        var rand = Math.floor(Math.random()*fullData.length)
        plant = fullData[rand].plant.image_default.url;
    })()
    startGame();
});

   function startGame() {

        $("#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 checkDone = false;
        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 > 98) {
                secs++;
                millsecs = 0;
                if(secs > 59){
                    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);
        }

  document.getElementById("instr").onclick=function(){ $("#instruct").dialog("open"); };

        start();    
        initSwap();

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

        $("#instruct").dialog({
            autoOpen: false,
            modal: true,
            width: 700,
            resizable: false,
            height: 250,
            position: [325,75],
            dialogClass: "fixed-dialog",
            draggable: false,
            title: "Puzzle Instructions",
            open: function(ev, ui) { clearTimeout(timer); },
            close: function(ev, ui) { if (!checkDone) { start(); } }
        });

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


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

        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){
                            checkDone = true;
                            clearTimeout(timer);
                            $("#thePlant").attr("src",plant);
                            $("#final").dialog("open");
                            }
                }
        });
    }
}
  });

 </script>

 </head>
 <body>
<big><big><big><div id="time"></div></big></big></big>
<div id="help"><image id="helper" width="200", height="200"/></div>
<div id="final"><img id="thePlant" width="450", height="450" <p align="top"> Plant Information! </p></div>
<div id="instruct"><p> To begin playing a picture will appear that has been scrambled. 
Your job is to drag each piece into the location you think it should be. 
When you move all the pieces into their correct locations a window will appearthat will tell you 
more about that plant and where to find it when you visit the Botanical Gardens. 
If you need help, click on the hints button and numbers will appear in the corners 
of the pictures to show you what order the pieces should be in. Good Luck!</p></div>
<div id="maindiv">
    <div id="puzzle">
        <div id="1" class="piece" style="background-position: -000px -000px;"><b><big><big><span>1</span></big></big></b></div>
        <div id="6" class="piece" style="background-position: -301px -151px;"><b><big><big><span>6</span></big></b></big></div>
        <div id="9" class="piece" style="background-position: -301px -301px;"><b><big><big><span>9</span></big></big></b></div>
        <div id="4" class="piece" style="background-position: -000px -151px;"><b><big><big><span>4</span></big></big></b></div>
        <div id="3" class="piece" style="background-position: -301px -000px;"><b><big><big><span>3</span></big></big></b></div>
        <div id="7" class="piece" style="background-position: -000px -301px;"><b><big><big><span>7</span></big></big></b></div>
        <div id="2" class="piece" style="background-position: -151px -000px;"><b><big><big><span>2</span></big></big></b></div>
        <div id="5" class="piece" style="background-position: -151px -151px;"><b><big><big><span>5</span></big></big></b></div>
        <div id="8" class="piece" style="background-position: -151px -301px;"><b><big><big><span>8</span></big></big></b></div>
    </div>
</div>

说明 切换提示

Answer 1

使用Firebug，您可以在网络标签中看到哪个部分很慢。

你应该在单独的文件中提取你的javascript和css，然后可以压缩它们。

Answer 2

正如其他用户建议的那样 - 如果您要从互联网上加载第三方内容，则必须记住每次刷新页面的下载时间可能会有所不同。

无论如何，我的建议是将您的自定义js代码移动到单独的文件中，并在完成开发过程时将其缩小。

最重要的是将该文件放在</body>标记之前。

这样做的原因是页面头部的脚本阻止了浏览器。它必须停止处理网站，直到下载并解析所有脚本。 stackoverflow上有关于该问题的很好的讨论，你应该通过它here。

Answer 3

http://botanicalapp.com/api/v1/plants/?photo=true的获取请求大约需要2-3.5秒，因此您可能无法以更快的速度处理它。

Chrome Developer Tools Network Tab

我建议您将包含网站javascript的脚本标记移动到页面底部。它不必驻留在头部并且在正文的结束标记之前将其放置在允许在加载脚本之前尽可能快地下载页面上的其他外部组件。

Answer 4

似乎没有什么比这更好了。我在想。有没有办法像一个更平滑的装载屏幕来掩盖它？正在调查一个js微调器，但无法让它正常工作。但这可以吗？

为什么我的网页组件加载速度慢？

4 个答案: