ASP.NET MVC/Jquery Ненавязчивый Ajax, пытаясь проверить, загружен ли элемент Jquery после того, как данные html возвращены

Question

Использование jquery ненавязчивой библиотеки ajax с ASP.NET MVC3 после нажатия ссылки ajax action и ответа (html данные) с сервера возвращается, он автоматически помещается в назначенный целевой #id. В моем случае эти данные также содержат элементы, для которых браузер будет получать изображения. Все, что я хочу сделать, - это вернуть эти данные, чтобы они были скрыты до тех пор, пока все изображения не будут загружены, показывая загрузочный div. По умолчанию loadelementid и длинные параметры ajax не будут вырезать его в моем случае, так как он не проверяет, загружены ли изображения, а div, у которого его содержимое заменено, содержит ajax.actionlink. Проблема не в том, что $ .load выполняется по какой-либо причине при попытке подключиться к событиям OnBegin, OnSuccess и т. Д. Для ответа ajax.

.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

Я не совсем уверен, что вы делаете, но есть несколько вещей, которые я вижу здесь не так, что должно быть исправлено, чтобы лучше помочь нам понять ваши намерения:

1. Ваш OnBegin и У OnSuccess есть один и тот же код. Что эффективно скрывает ваш ColumnContainer.
2. In FinishIt вы загружаете контент в ColumnContainer (который по-прежнему скрыт).
3. load ожидает форму .load (url, function) и, вероятно, не работает по этой причине.
4. Если вы используете ненавязчивый аякс, то почему вы пытаетесь загрузить .load?

Answer 2

Вы можете использовать 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", 

})