MVC3 Загрузка частичного с imgs с помощью Ajax

Question

Я загружаю частичное представление на страницу по таймеру с помощью jquery Ajax.Когда целевой div загружается, изначально любые изображения (в данном случае небольшие миниатюры pngs) не отображаются, а затем через небольшой интервал они подмигивают. Я бы хотел, чтобы они либо загружались немедленно, либо откладывали показ div до изображенийполностью загружены.Как мне это сделать?

Частично я загружаю:

<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 Я загружаю в (с частичным предварительным отображением, чтобы он отображался при начальной загрузке):

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

Javascript для частичной загрузки:

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

}

Действие контроллера, вызываемое javascript:

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

Answer 1

Вы можете использовать плагин waitForImages :

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