Correct usage of microformat

Question

I am using microformat for the first time.

So as examples given on http://support.google.com/webmasters/bin/answer.py?hl=en&answer=164506, I changed the code.

This is the existing code that was present on the page:

<div class="evD mr10">
    <div class="imgH fl"><img /></div>
    <div class="infAr">
        <h3><a href="event_URL">EVENT NAME</a></h3>
        <h4><span>at</span>VENUE NAME</h4>
        <p>Event Description</p>
        <a class="tdd" href="#">Genre</a>
    </div>
    <div class="dth">
        <div class="sfrD fl">
        </div>
        <div class="strE sn fl">
        </div>
    <div class="Buy">
        <a class="bkT" href="buy_link"></a>
    </div>
    </div>
</div>

The Changes I made include : Change the doctype to html5, and added microformat classes.

<div class="vevent evD mr10">
    <div class="imgH fl"><img class="photo" /></div>
    <div class="infAr">
        <h3><a class="url summary" href="event_URL">EVENT NAME</a></h3>
        <h4 class="location"><span>at</span>VENUE NAME</h4>
        <p class="description">Event Description</p>
        <a href="#" class="tdd category">Genre</a>
    </div>
    <div class="dth">
        <div class="dtstart frD fl">DATE_START<span class="value-title" title="Date in ISO"></span></div>
        <div class="dtend strE sn fl"><span class="value-title" title="Date in ISO"></span></div>
    <div class="Buy tickets">
        <a class="bkT offerurl" href="buy_link"></a>
    </div>
    </div>
</div>

I have the following questions/doubts :

1. Is it ok to have existing classes alongwith the microformat tags as done above?
2. As mentioned on http://support.google.com/webmasters/bin/answer.py?hl=en&answer=1093493#usage, it is not allowed to have display:none on the content. However, I pass the data set and paginate using javascript, in which I show the relevant data. So how do I make sure that these is not ignored.
3. I load the images which are on the current page, leaving the src as blank, and later change the src, as the page is changed. So initally the event's photo is blank. How do I counter from a search engine reading as blank.

Thank you. (Sorry about the question being so long)

Answer 1

1) that is no problem. You can even combine multiple types of semantic markup on the same tags.

2) 3)

If the data is hidden and in JavaScript/AJAX then it is highly unlikely Google will see it.

You may have to restructure your architecture to make your content crawlable. That's a big subject. I suggest looking up "progressive enhancement" which is the method I currently think is best.