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

Question

将 jquery 非侵入式 ajax 库与 ASP.NET MVC3 结合使用，单击 ajax 操作链接后，当服务器返回响应（html 数据）时，它会自动放入指定的目标 #id 中。就我而言，该数据还包含浏览器随后将获取图像的元素。我想要做的就是一旦返回此数据，就将其隐藏起来，直到加载所有图像，同时显示加载 div。默认的loadingelementid和duration ajax选项在我的情况下不会削减它，因为它不会检查图像是否已加载并且替换其内容的div包含ajax.actionlink。问题是当尝试挂钩 OnBegin、OnSuccess 等事件以获取 ajax 响应时，由于某种原因，$.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 因为它会立即将新内容注入到 DOM 中，而无需等待图像已加载：

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

})

Answer 2

我不太确定你在做什么，但我认为这里有一些错误，应该修复这些问题，以更好地帮助我们理解你的意图：

1. 你的 OnBegin 和 OnSuccess 具有相同的代码。这有效地隐藏了您的 ColumnContainer。
2. 在 FinishIt 中，您将内容加载到 ColumnContainer（仍处于隐藏状态）中。
3. load 需要 .load(url, function) 形式，因此可能会失败。
4. 如果您使用的是不显眼的 ajax，为什么要尝试 .load？