Is an image there? if so carry on. If not keep checking

Question

I have a button #myButton that has a link to an image that will be created by a PHP script createImage(). I need to fire the createImage() and then check to see if the image is there isImgThere(imageLink);.

The problem is that my code just runs through the isImgThere(imageLink) function and does not wait until true before the link is triggered. How do I get the isImgThere(imageLink); function to finish only when success? I have tried using while statements but none have worked.

$('#myButton').on('click', 'img', function() {
    createImage(size);
    isImgThere(imageLink);
});

function isImgThere(imageLink) {
    $.ajax({
        url:imageLink,
        type:'HEAD',
        error: function()
        {    
            alert("false");
            return false;
        },
        success: function()
        {    
            alert("true");
            return true;
        }
    });
}

This is the create an image function:

function createImage(size) {
    var myImage = ZoomAddress + 'php/zoom.php';
    var myPram='random='+random+'&returntype=3&size='+size+'&Views='+imgViews+'&'+WhatZoom;
    $.post(myImage,
        myPram,
        function(data) {

    });
}

Would you not add a callback to the `createImage()` method instead, triggered when the PHP script is done and sends a response? — Marty, May 11 '14 at 23:51
Setting actions from async callbacks is one of the more challenging aspects of js programming. This is the sort of thing promises are meant to address ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise ), but they're not supported on nearly enough browsers yet to rely on. Like Marty says, you should probably just call createImage() from your callback. — Josh from Qaribou, May 11 '14 at 23:53

score 0 · Accepted Answer · answered May 12 '14 at 00:01

0

You should make use of the response callback for a cleaner approach; something like:

function createImage(size, done)
{
    var params = {
        random: random,
        returntype: 3,
        size: size,
        Views: imgViews
    };


    $.post(ZoomAddress + 'php/zoom.php', params, done);
}

Which would be used in your case like:

$('#myButton').on('click', 'img', function()
{
    createImage(size, function()
    {
        // Image is there.
    });
});

answered May 12 '14 at 00:01

Marty

39,033
19
93
162

Thanks Marty, do I have to add code to my PHP? I will read up on callbacks – user2238083 May 12 '14 at 00:18
@user2238083 No, you won't need to add code to the PHP. – Marty May 12 '14 at 00:21
Thanks, sorry if I'm missing something but how do I get the code to wait here "// Image is there." until the image is there? – user2238083 May 12 '14 at 00:29
yes I see: $('#myButton').on('click', 'img', function(e) { e.preventDefault(); //stop the browser from following createImage(size, function(e) { window.location.href = imageLink; }); }); – user2238083 May 12 '14 at 00:53

Is an image there? if so carry on. If not keep checking

1 Answers1