MVC3 Loading partial with imgs with Ajax

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));
}

Darin Dimitrov · Accepted Answer · 2012-03-08 16:58:07Z

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();
            });
        }
    });
}

answered Mar 8, 2012 at 16:58

Darin Dimitrov

1.0m277 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

MVC3 Loading partial with imgs with Ajax

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related