javascript - 如何在代码其余部分运行之前从 url 中提取图像。 JavaScript

Question

我有一个带有益智游戏的网页，该游戏正在加载游戏功能，然后才能从网址中提取图像。我怎样才能阻止这个以便之前可以拉取图像？已经研究了一段时间了，请详细回复:)!

我的网页显示问题:

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

var plant = "";

$(function () {
$.ajax({"url":"http://beta.botanicalapp.com/api/v1/plants/?photo=true"})
.done(function(fullData){
        plant = fullData[2].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);

$("#instruct").click(function(){$("final").dialog("open"); 
return 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 == 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

如何在加载时使用 jquery 运行函数启动游戏函数

$('#imageID').on('load', function() {

startGame();

});