Hearo.fm needed a "jam lever" that the user "pulls" (clicks) to set their status as "down to jam". This recursively preloads the images and animates it

jamLever Django template.html

<script type="text/javascript">

	csrfTOKEN = '{{ csrf_token }}';
	profileID = '{{ user.profile.id }}';

	function setDownToJam(bool){
		$.ajax({
		  type: 'POST',
		  url: '/jam/down-to-jam-ajax/',
		  data: {'csrfmiddlewaretoken': csrfTOKEN,
			     'profileID': profileID,
			     'dtj': bool},
		  success: function(data){
			if (data == 'f'){
				$('#header_downToJam').hide();
			} else if (data == 't'){
				$('#header_downToJam').show();
			}
		}
	});
	}	
	
	nearby_artists = {};

	jamLever = {'True':true,'False':false}['{{down_to_jam}}'];

	function recursivePreload(i){
		var d = '/public/images/jam_lever/'
		var srcs = ['leverHalfUp','leverHalfDown','leverDown']; // lever images to preload to ensure smooth animation.
		var img = new Image()
		img.onload = function(){ if (i < 2){ recursivePreload(i + 1) } };
		img.src = d + srcs[i] + '.png';
	}

	function setLeverSRC(x){
		$('#lever').attr('src', '/public/images/jam_lever/' + x)
	}

	function flipLever(i){
		var stagesDown = ['HalfUp', 'Middle', 'HalfDown', 'Down'];
		var stagesUp = ['HalfDown', 'Middle', 'HalfUp', 'Up'];
		if(!jamLever){
			setLeverSRC('lever' + stagesDown[i] + '.png');
			if (i < 3){ setTimeout(function(){ flipLever(i + 1) }, 50); } else { jamLever = true; setDownToJam('t'); }
		} else {
			setLeverSRC('lever' + stagesUp[i] + '.png');
			if (i < 3){ setTimeout(function(){ flipLever(i + 1) }, 50); } else { jamLever = false; setDownToJam('f'); }
		}
	}


    $(document).ready(function() {
        var ourZIP = '{{ourZIP}}';
        initialize_map(ourZIP);

        $("#maxDist").change(function() {
            $("#maxDistForm").submit();
        });
	recursivePreload(0);
    });
</script>

...



<img src="/public/images/jam_lever/{% if down_to_jam %}leverDown{% else %}leverUp{% endif %}.png" style="position:absolute;top:0px;left:10px" class="jamLever" id="lever" onclick="flipLever(0)"/>