Question

I am loading a partial view into a page on a timer with jquery Ajax. When the target div loads, initially the any images (in this case small thumbnail pngs) are not displayed, and then after a slight interval, they wink in. I would like them to either load immediately, or delay showing the div until the images have fully loaded. How should I go about doing this?

Partial I am loading:

<script type="text/javascript">
$(document).ready(function() {
    $('.Comment').waitForImages();
});

</script>

<h3>Comments</h3>
@foreach (var c in Model.Comments) {
    <div class="Comment">
        <img src='@string.Format("/ProfilePics/{0}_thumb.png", c.User.ID)' alt="@c.User.CN picture"/><strong>@c.User.CN</strong>    
        @Ajax.ActionLink("delete", "DeleteComment", "Item", new {commentID = c.ID, itemID = c.TaskItem.ID}, new AjaxOptions{HttpMethod = "POST", OnSuccess = "GetComments"})
        <br />
        <p>
            @c.Comment1</p>
    </div>
}

Div I am loading into (with partial prerendered so that it shows up on initial load):

<div id="Comments">
    @Html.Partial("GetComments", new GetCommentsModel(Model.Task.ID))
</div>

Javascript to load partial:

$(document).ready(function () {
    setInterval(GetComments, 15000);
});
function GetComments() {
    $('#Comments').load('/Item/GetComments', {
        id: '@Model.Task.ID'
    });

}

Controller action that is called by javascript:

[HttpPost]
[Authorize]
public ActionResult GetComments(int id) {
    return PartialView(new GetCommentsModel(id));
}

Answer 1

You could use the waitForImages plugin:

function GetComments() {
    $.ajax({
        url: '@Url.Action("GetComments", "Item")',
        type: 'POST',
        data: { id: '@Model.Task.ID' },
        success: function(result) {
            $('#Comments').hide().html(result).waitForImages(function() {
                $(this).show();
            });
        }
    });
}