javascript - ASP.NET MVC/Jquery Unobtrusive Ajax，尝试在返回 html 数据后检查元素是否用 Jquery 加载

Question

在 ASP.NET MVC3 中使用 jquery unobtrusive ajax 库，单击 ajax 操作链接后，当返回来自服务器的响应(html 数据)时，它会自动放入指定的目标#id。在我的例子中，此数据还包含浏览器随后将获取图像的元素。我想要做的就是在返回此数据后将其隐藏，直到所有图像都加载完毕，同时显示一个正在加载的 div。在我的情况下，默认的 loadingelementid 和 duration ajax 选项不会削减它，因为它不检查图像是否已加载并且正在替换其内容的 div 包含 ajax.actionlink。问题是在尝试挂接到 ajax 响应的 OnBegin、OnSuccess 等事件时，由于某种原因没有执行 $.load。

.ColumnContainer 位于 #BodyContent 内，包含需要加载的图像。

 <a data-ajax="true" data-ajax-mode="replace" data-ajax-begin="OnBegin" data-ajax-success="OnSuccess"   data-ajax-update="#ContentBody" 
data-ajax-url="/Store/StoreContent/@Model.category/@(Model.PagingInfo.CurrentPage - 1)" href="/@Model.category/page/@(Model.PagingInfo.CurrentPage - 1)">  <img src="/Content/extremepc/leftarrow.png" /></a>






function OnBegin() {
$('.ColumnContainer').hide();
$('#LoadingLayer').css('display', 'inline-block');}


     function OnSuccess(data) {

    $('.ColumnContainer').hide();
    $('#LoadingLayer').css('display', 'inline-block');


    FinishIt();


    }

    function FinishIt() {

        $('.ColumnContainer').load(function () { alert('This code does not execute :( '); });

        $('#LoadingLayer').css('display', 'none');


    }

Answer 1

您可以使用 waitForImages插件:

var onSuccess = function (result) {
    $('#result').html('loading...');
    $(result).waitForImages(function () {
        $('#result').html(this);
    });
};

您可以在其中放置一个 DOM 元素来容纳新的 DOM:

<div id="result"></div>

并且在您的 AjaxOptions 中您将仅指定 OnSuccess 事件，您不应使用 UpdateTargetId 因为它会立即将新内容注入(inject) DOM 而无需等待图像加载:

@Ajax.ActionLink("click me", "LoadAction", new AjaxOptions
{
    OnSuccess = "onSuccess",

})