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 clicked ?

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>