javascript - 传单第一次不加载网址

Question

我有这段代码用于在 get 函数中加载非地理 map ，以每次获取我需要的 map :

$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);
    }
);

但是，我第一次调用该函数时，它无法正确加载图像，或者如果我第一次调用时删除缓存，也不会加载它。当我回想起该功能时，它会正确加载，之后如果我不删除缓存，它会一直加载正常，这只是第一次加载不正确......为什么？

Answer 1

当您访问其大小时，您的图像尚未加载。

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

图像加载后继续。