Question

I have this crazy bug that only comes up sometimes. It was apparent when I was developing this site but then it disappeared for a week or so and now that the site is live it’s back. I don’t think it has anything to do with my hosting because it bugs out locally as well.

My problem is that I’m swapping the css value background-image on each click. It works perfectly 95% of the time, but sometimes for a span of like 15 minutes it just won’t display about half the images, seemingly randomly. The strangest thing is that if you look in the inspector you can see that the script correctly changed the css value, but the image simply wasn’t loaded. I have no idea why!

Here’s the website: shouldivoteoliver.com It’s on the “Propaganda” page.

Here’s the Javascript:

$(document).ready(function() {
    var n=0;
        $(".button").click(function(){
            if (n===5){
                $('<video style="position:relative;left:250px;" src="http://dl.dropbox.com/u/1011105/6.ogg" controls="controls">your browser does not support the video tag</video>').appendTo($('#putin'));
                n++;
                $("#putin").css("background-image","none");
                }
            else{
                $('video').remove();
                $("#putin").css("background-image",function(){
                    if (n>13){
                    n=1;
                    return ('url(images/1.jpg)');
                    }
                    else{
                    n++;
                    return ('url(images/'+n+'.jpg)');
                    }
                    });
            }
        });
});

Answer 1

I would suggest using a background image as a sprite and changing the background position as
opposed to changing the background image property.

Here is a tutorial that I googled

http://www.noobcube.com/tutorials/html-css/css-background-image-sprites-a-beginners-guide-/