MVC3使用Ajax加載部分圖像與imgs

Question

我使用jQuery Ajax將加載的部分視圖加載到計時器的頁面上。當目標div加載時，最初任何圖像（在這種情況下，小的縮略圖PNG）都不顯示，然後稍微間隔後，它們就會閃爍。我希望它們立即加載，或延遲顯示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 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(); 
      }); 
     } 
    }); 
}