リーフレットdoesntの負荷URL初めて

Question

：

$scope.tableFloors = data; 

//Creamos las dimensiones del mapa e inicializamos la url de la imagen correspondiente al plano 
$scope.url = $scope.tableFloors.results[0].idBluePrint; 
console.log("url: " + $scope.url); 
//INICIALIZACIÓN DE VARIABLES NECESARIAS PARA GENERAR EL MAPA 
//zoom mínimo para el mapa 
$scope.minZoom = 1; 
//zoom máximo para el mapa 
$scope.maxZoom = 4; 
//posición del centro para el mapa 
$scope.center = [0, 0]; 
//zoom por defecto al cargar el mapa 
$scope.zoom = 3; 
//sistema de referencia de coordenadas 
$scope.crs = L.CRS.Simple; 
//atributo para mostrar/ocultar información extra 
$scope.attributionControl = false; 
$scope.map = L.map('image-map', 
{ 
    minZoom: $scope.minZoom, 
    maxZoom: $scope.maxZoom, 
    center: $scope.center, 
    zoom: $scope.zoom, 
    crs: $scope.crs, 
    attributionControl: $scope.attributionControl 
}); 

//obtenemos el ancho y el alto de la foto del plano 
$scope.fotoPlano = new Image(); 
$scope.fotoPlano.src = $scope.url; 
$scope.width = $scope.fotoPlano.width; 
$scope.height = $scope.fotoPlano.height; 
// Calculamos los bordes de la imagen en el espacio de coordenadas 
$scope.surOeste = $scope.map.unproject([0, $scope.height], $scope.map.getMaxZoom() - 1); 
$scope.norEste = $scope.map.unproject([$scope.width, 0], $scope.map.getMaxZoom() - 1);; 
$scope.bounds = new L.LatLngBounds($scope.surOeste, $scope.norEste); 
// lo añadimos 
L.imageOverlay($scope.url, $scope.bounds).addTo($scope.map).bringToFront(); 
$scope.myIcon = L.icon(
{ 
    iconUrl: 'assets/images/ic_location.png', 
    // iconRetinaUrl: 'my-icon@2x.png', 
    iconSize: [34, 34], 
    iconAnchor: [22, 94], 
    // popupAnchor: [-3, -76], 
    // shadowUrl: 'my-icon-shadow.png', 
    // shadowRetinaUrl: 'my-icon-shadow@2x.png', 
    // shadowSize: [68, 95], 
    // shadowAnchor: [22, 94] 
}); 

// establecemos los límites 
$scope.map.setMaxBounds($scope.bounds); 
$scope.yx = L.latLng; 
$scope.xy = function (x, y) 
{ 
    if (L.Util.isArray(x)) 
    { // When doing xy([x, y]); 
     return $scope.yx(x[1], x[0]); 
    } 
    return $scope.yx(y, x); // When doing xy(x, y); 
}; 

var puntoIncidencia1 = $scope.xy(100, -40); 

var incidencia1 = L.marker(puntoIncidencia1, 
{ 
    icon: $scope.myIcon, 
    draggable: true 
}).addTo($scope.map).bindPopup('incidencia1'); 
//version con mapclickevent 
$scope.map.on('click', 
    function mapClickListen(e) 
    { 
     var pos = e.latlng; 
     console.log("pos: ", this.options); 
     console.log('map click event'); 
     var marker = L.marker(
      pos, 
      { 
       draggable: true 
      } 
     ); 
     marker.on('drag', function (e) 
     { 
      console.log('marker drag event'); 
     }); 
     marker.on('dragstart', function (e) 
     { 
      console.log('marker dragstart event'); 
      $scope.map.off('click', mapClickListen); 
     }); 
     marker.on('dragend', function (e) 
     { 
      console.log('marker dragend event'); 
      setTimeout(function() 
      { 
       $scope.map.on('click', mapClickListen); 
      }, 10); 
     }); 
     marker.addTo($scope.map); 
    } 
); 

しかし、私はそれが負荷をdoesntの関数を呼び出し初めて適切に画像を表示するか、またはキャッシュを削除した場合は、それも最初に読み込まれません。それは、私が関数を思い出したときに正しくロードされます。その後、キャッシュを削除しないと、常にOKです。最初は正しく読み込まれません。なぜですか？

Answer 1

サイズにアクセスするまでに画像が読み込まれません。

var imageObj = new Image(); 
imageObj.addEventListener('load', function() { /* ... */ }, false); 
// use the load event to know that image has been loaded 

画像が読み込まれたときに進みます。