Prevent flickering on redraw

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<div id="map"></div>

CSS

#map { height: 180px; }

JavaScript

var map = L.map('map').setView([51.505, -0.09], 13);



/* var layer2 = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: 'prevent flickering',
    maxZoom: 18
}).addTo(map); */

// map-id shamelessly stolen from leaflet's example map: http://leafletjs.com/examples/quick-start.html
var layer = L.tileLayer('http://{s}.tiles.mapbox.com/v3/examples.map-i86knfo3/{z}/{x}/{y}.png', {
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
    maxZoom: 18
}).addTo(map);


map.on('click', function(e) {
    //layer2.bringToFront();
    layer.on('load', function(e) {
        console.log('loaded');
        layer.bringToFront();
    });
    layer.redraw();
});