Loading an image buried within several divs when the parent div is shown by a .show jQuery command
<p>I have a jQuery script running on an ASP site that shows hidden DIVs when the id of a select form matches the div's ID:</p>

<pre><code>$(document).ready(function(){
    $('select[name$="_77"]').change(function() {
        $(".select_77").hide();
        $(".select_77[id='" + this.value + "']").show();
    })
})
</code></pre>

<p>The form truncated to only one option for this example:</p>

<pre><code>&lt;select name="option____jdfhj387___77"&gt;
    &lt;option value="1922"&gt;Raisins&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>And this is one of the many divs that gets unhidden:</p>

<pre><code>&lt;div id="select_image"&gt;
    &lt;div class="select_77" id="1922" style="display:none;"&gt;
        &lt;div class="border"&gt;
            &lt;div class="content"&gt;
                &lt;img src="photos/option/1922.jpg"&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>The photos are medium sized, and it takes roughly 20-30 seconds for the page to load when I have 200+ of these images. Is there anyway to have the image load only when the parent div becomes visible, without having to manually put in every image url inside the script?</p>
