JQuery if condition on css not working

I have a server sending status-updates every 50ms.

I want to set the buttons on my page up to display the according state.

I had

if (data.playspeed == 100) {
            console.log("play");
            $('#prev').css('background-image','url(../public/images/skipr.png)');
            $('#next').css('background-image','url(../public/images/skipf.png)');
            $('#rwd').css('background-image','url(../public/images/rwdbutton.png)');
            $('#stop').css('background-image','url(../public/images/stopbutton.png)');
            $('#play').css('background-image','url(../public/images/playbutton-active.png)');
            $('#ffwd').css('background-image','url(../public/images/ffwdbutton.png)');
    }

and it worked as intended. Problem: on an ipad, the buttons are blinking, because the images are refreshed too often. so i changed the code to:

if (data.playspeed == 100) {
        if ($('#play').css('background-image') != 'url(../public/images/playbutton-active.png)') {
            console.log("play");
            $('#prev').css('background-image','url(../public/images/skipr.png)');
            $('#next').css('background-image','url(../public/images/skipf.png)');
            $('#rwd').css('background-image','url(../public/images/rwdbutton.png)');
            $('#stop').css('background-image','url(../public/images/stopbutton.png)');
            $('#play').css('background-image','url(../public/images/playbutton-active.png)');
            $('#ffwd').css('background-image','url(../public/images/ffwdbutton.png)');
        }
    }

my logic: only update the buttons to play-state, if the play-button is not yet set to be active.

but it doesn't work and i have NO idea why. the console.log still fires everytime (and the buttons still blink).

why?