Don´t preload images in XML (google maps API v3)

问题

Hey i have a question that seems very tricky.

I want to add images for every Infowindow in my map. But the clue is that the images shouldn't parse directly from the XML, because if there are 300 markers and for every marker an image, that would by a very big data which have to load on mapstart. Is it possible to load the image only if the marker has cliked ?

Heres my code:

<script type="text/javascript"> 

      var side_bar_html = ""; 
       var sidebarMarkers = []; 
     var infoWindow = new google.maps.InfoWindow(
    { 
        maxWidth: 250

      });
     <!----------- GASTHAUS image ------------> 

        var imageGasthaus = {
        url: 'image/gasthaus.png',
        scaledSize: new google.maps.Size(26, 26),   
      };


     <!----------- BAR image ------------>  
      var imageBar = {
        url: 'image/bar.png',
        scaledSize: new google.maps.Size(26, 26),   
      };




      var hoverIcons = [];
        hoverIcons["gasthaus"] = imageGasthausHover;
        hoverIcons["bar"] = imageBarHover;


      var customIcons = [];
        customIcons["gasthaus"] = imageGasthaus;
        customIcons["bar"] = imageBar;


        var markerGroups = { "gasthaus": [], "bar": []};


     function myclick(i) {
      google.maps.event.trigger(sidebarMarkers[i], "click");
    }

     function createMarker(latlng, name, address, tel, href, image, type) {

            var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            icon: customIcons[type],
            zIndex: Math.round(latlng.lat()*-100000)<<5
            });


    //// Infowindow öffnen bei Linksklick


        var onMarkerClick = function() {
          var marker = this;
          infoWindow.setContent(html);
          infoWindow.open(map, marker);
        };

    google.maps.event.addListener(marker, 'click', onMarkerClick);


    //// Infowindow Inhalt 

      var html = '<div id="infowindowLink" style = "line-height: 1.35; overflow: hidden; ">' + '<span style="font-weight: bold; color:#008B00;">' + name + '</span> <br/>' + address + '<br><br>' + '<span>'  + href + '</span>' + '<br>'+ tel + '<br><br>'+ image + '</div>';

        side_bar_html += '<a href="javascript:myclick(' + (sidebarMarkers.length-1) + ')">' + name + '<\/a><br>';

     var zooms = point;

    }

    function initialize() {


    // XML-Datei auslesen

          downloadUrl("markerdata.xml", function(doc) {
            var xmlDoc = xmlParse(doc);
            var markers = xmlDoc.documentElement.getElementsByTagName("marker");

            for (var i = 0; i < markers.length; i++) {
        name = markers[i].getAttribute("name");
                var address = markers[i].getAttribute("address");
                var tel = markers[i].getAttribute("tel");
                var href= '<a href="'+markers[i].getAttribute("href")+'" target="_blank">'+markers[i].getAttribute("web")+'</a>';


                // This should be loaded only if a marker get clicked 

                var image = '<img src="'+markers[i].getAttribute("image")+'" style="width:250px; height:180px;" alt=""/>';          


     var type = markers[i].getAttribute("type");

               point = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
                                        parseFloat(markers[i].getAttribute("lng")));





            var marker = createMarker(point, name, address, tel, href, image, type);

            }

      document.getElementById("side_bar").innerHTML = side_bar_html;
          });
        }


    google.maps.event.addDomListener(window, 'load', initialize);
</script>