Question

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:

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

The form truncated to only one option for this example:

<select name="option____jdfhj387___77">
    <option value="1922">Raisins</option>
</select>

And this is one of the many divs that gets unhidden:

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

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?

Answer 1

OK I figured it out after several hours of research.

I found and added code that renames an attribute of an img tag with a matching ID selected under the form.

$(document).ready(function(){
    $('select[name$="_77"]').change(function() {
        $(".select_77").hide();
        $(".select_77[id='" + this.value + "']").show();
        $("img.option[realsrc][id='" + this.value + "']").each(function() {
            var $t = $(this);
                $t
                .attr({
                    src : $t.attr('realsrc') /* Copies realsrc attribute and makes a src attribute*/
                })
                .removeAttr('realsrc'); /* Deletes the realsrc attribute */
    });
    })
})

Then I added class=”option” and id=”#” and renamed src= to realsrc=.

<img class="option" id="1922" realsrc="photos/option/1922.jpg">

Now when someone selects the option that matches the ID of the image, the image’s realsrc will be renamed to src and it will download and appear!