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

【问题标题】：ASP.NET MVC / Jquery Unobtrusive Ajax, trying to check if element is loaded with Jquery after the html data is returnedASP.NET MVC / Jquery Unobtrusive Ajax，尝试在返回html数据后检查元素是否加载了Jquery
【发布时间】：2012-02-22 14:03:49
【问题描述】：

在 ASP.NET MVC3 中使用 jquery unobtrusive ajax 库，在单击 ajax actionlink 后，当从服务器返回响应（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');


    }

【问题讨论】：

标签： javascript ajax asp.net-mvc unobtrusive-javascript

【解决方案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",

})

【讨论】：

【解决方案2】：

我不太确定你在做什么，但我认为这里有几处有误，应该加以修正，以更好地帮助我们理解你的意图：

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

【讨论】：

我以为 $('#element').load(function() {}) 只有在“元素”完成加载后才执行里面的代码。您对 $.load('url',function) 感到困惑