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

MVC3使用Ajax加载部分imgs

1 个答案: