How to pull image from url before code rest of code runs. Javascript

Question

I have this webpage with a puzzle game that is loading the game features before the image can be pulled from a url. How can I stall this so the image can be pulled before? Been working on it for awhile, a detailed response please :)!

My webpage to show issue:

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

possible duplicate of [jQuery detect when image has loaded](http://stackoverflow.com/questions/3537469/jquery-detect-when-image-has-loaded) — Pseudonym, Apr 24 '14 at 19:16

kirkage · Answer 1 · 2014-04-24T19:06:54.657

1

how about running the function start game function with jquery on load

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

startGame();

});

edited Apr 24 '14 at 19:06

answered Apr 24 '14 at 18:59

kirkage

51
7

Thanks for the reply but that doesn't seem to fix it – Nolemonpledge Apr 24 '14 at 19:01
How does it not fix it? You asked for detailed answers and then give vague responses – Pseudonym Apr 24 '14 at 19:10
Haha, hmm it doesn't fix it by the problem is still there? Detailed – Nolemonpledge Apr 24 '14 at 19:15

score 0 · Answer 2 · answered Apr 24 '14 at 19:03

0

You could wrap startGame() function in

 $( window ).load(function() {
    startGame();
}

Run a function when the page is fully loaded including graphics. https://api.jquery.com/load-event/

answered Apr 24 '14 at 19:03

Fredrik Öberg

87
1
6

score 0 · Answer 3 · edited May 23 '17 at 12:11

Check out this question:

Detect image load

Here is the answer that seems to solve your issue:

$("#myImg").load(function() {
  alert('I loaded!');
}).attr('src', 'myImage.jpg');

Be sure to attach it before setting the source, or the event may have fired before you attached a handler to listen for it (e.g. loading from cache).

If that's not doable (setting the src after binding), be sure to check if it's loaded and fire it yourself, like this:

$("#myImg").load(function() {
  alert('I loaded!');
}).each(function() {

if(this.complete) $(this).load(); });

How to pull image from url before code rest of code runs. Javascript

3 Answers3