Использование библиотеки javascript instant.js для изображений не работает с ajax - PullRequest
Новая
       11

Использование библиотеки javascript instant.js для изображений не работает с ajax

0 голосов
/ 12 сентября 2009

У меня есть сайт asp.net-mvc, и я использую приведенную ниже библиотеку javascript для страницы с фотографиями, чтобы обвести границы вокруг всех моих фотографий 

http://www.netzgesta.de/instant/

Я просто изменил свой сайт, чтобы загружать свои фотографии через ajax вместо перезагрузки всей страницы, и, хотя, когда я отлаживаю его, создается правильный HTML, я не вижу ни одного изображения: 

<div id="status">
    <% Html.RenderPartial("AlbumGrid",Model); %>
</div>

изменение, которое я сделал, состояло в том, чтобы взять все ссылки как это: 

<a href='Album?Page=" + i + "&AlbumName=" + albumName_ + "'>" + i + "</a>");

и измените его на это, используя класс ajaxhelper: 

 Ajax.ActionLink(i.ToString(), "Album?Page=" + i + "&AlbumName=" + albumName_, new AjaxOptions { UpdateTargetId = "status", LoadingElementId = "updating"}));

Я знаю, что это как-то связано с этой библиотекой instant.js, потому что она ломается, когда у меня так: 

<img class=\"instant ishadow50\"  src=\"...">

но если я удаляю класс выше и просто регулярно загружаю изображения, все работает нормально (но, конечно, я не получаю эффекта границы). Так что это ниже работает нормально. 

<img   src=\"...">

Кто-нибудь пытался успешно использовать эту библиотеку с ajax?

РЕДАКТИРОВАТЬ: Я добавил полный источник ниже (сокращая до минимума): 

<head>
    <script type='text/javascript' src='../../Scripts/jquery-1.3.2.js'></script>
    <script type="text/javascript" src="../../Scripts/instant.js"></script>
<script type="text/javascript" src="../../Scripts/cvi_instant_lib.js"></script>
<script type="text/javascript" src="../../Scripts/MicrosoftAjax.js"></script>
<script type="text/javascript" src="../../Scripts/MicrosoftMvcAjax.js"></script>

<script type="text/javascript">
    function done() {
        alert('done');
    }
</script>

<script type="text/javascript">
<!--
        var canvascheck = document.createElement('canvas');
        if (canvascheck.getContext || (document.all && document.namespaces && !window.opera)) {
            document.writeln('<style type="text/css">');
            document.writeln('img.instant { visibility: hidden; }');
            document.writeln('<\/style>');
            }
-->
</script>
</head>

<body >
<center>

<div id="status">
    <table width="750" cellspacing="0" cellpadding="10" rules="all" border="1"      style="background-color:#EEEEEE;width:750px;border-collapse:collapse;">
<tr align="center">
<td width="187.5" valign="top">
<a id="picLinks_0" class="picLinks" href=''><img class="instant ishadow50" id='001'  src="http://adam.kantro.net/pics/Jersey_Shore_1/Thumbnails/Jersey_Shore_1-  pic001.jpg"></img></a>
<br/>

</td>
<td width="187.5" valign="top">
<a id="picLinks_1" class="picLinks" href=''><img class="instant ishadow50" id='002'  src="http://adam.kantro.net/pics/Jersey_Shore_1/Thumbnails/Jersey_Shore_1-pic002.jpg"></img></a>
<br/>
</td>
<td width="187.5" valign="top">
<a id="picLinks_2" class="picLinks" href=''><img class="instant ishadow50" id='003'  src="http://adam.kantro.net/pics/Jersey_Shore_1/Thumbnails/Jersey_Shore_1-pic003.jpg"></img></a>
<br/>
</td>
<td width="187.5" valign="top">
<a id="picLinks_3" class="picLinks" href=''><img class="instant ishadow50" id='004'  src="http://adam.kantro.net/pics/Jersey_Shore_1/Thumbnails/Jersey_Shore_1-pic004.jpg"></img></a>
<br/>
</td>
</tr>
<tr align="center">
<td width="187.5" valign="top">
<a id="picLinks_4" class="picLinks" href=''><img class="instant ishadow50" id='005'  src="http://adam.kantro.net/pics/Jersey_Shore_1/Thumbnails/Jersey_Shore_1-pic005.jpg"></img></a>

<br/>
</td>
<td width="187.5" valign="top">
<a id="picLinks_5" class="picLinks" href=''><img class="instant ishadow50" id='006'  src="http://adam.kantro.net/pics/Jersey_Shore_1/Thumbnails/Jersey_Shore_1-pic006.jpg"></img></a>
<br/>
</td>
</tr>
</table>
</div>

<img id="updating" src="../../images/ajax-loader.gif" style="display: none;" alt="Updating ..." />

<br />
      <div id="paging">
       Page: 1 of 9&nbsp;&nbsp;&nbsp;  1 
<a href="/Photos/Album?Page=2&amp;AlbumName=Jersey_Shore_1" onclick="Sys.Mvc.AsyncHyperlink.handleClick(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, loadingElementId: 'updating', updateTargetId: 'status', onSuccess: Function.createDelegate(this, done) });">2</a>
<a href="/Photos/Album?Page=3&amp;AlbumName=Jersey_Shore_1" onclick="Sys.Mvc.AsyncHyperlink.handleClick(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, loadingElementId: 'updating', updateTargetId: 'status', onSuccess: Function.createDelegate(this, done) });">3</a>

<a href="/Photos/Album?Page=4&amp;AlbumName=Jersey_Shore_1" onclick="Sys.Mvc.AsyncHyperlink.handleClick(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, loadingElementId: 'updating', updateTargetId: 'status', onSuccess: Function.createDelegate(this, done) });">4</a>
<a href="/Photos/Album?Page=5&amp;AlbumName=Jersey_Shore_1" onclick="Sys.Mvc.AsyncHyperlink.handleClick(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, loadingElementId: 'updating', updateTargetId: 'status', onSuccess: Function.createDelegate(this, done) });">5</a>
 <a href="/Photos/Album?Page=6&amp;AlbumName=Jersey_Shore_1" onclick="Sys.Mvc.AsyncHyperlink.handleClick(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, loadingElementId: 'updating', updateTargetId: 'status', onSuccess: Function.createDelegate(this, done) });">6</a>
 <a href="/Photos/Album?Page=7&amp;AlbumName=Jersey_Shore_1" onclick="Sys.Mvc.AsyncHyperlink.handleClick(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, loadingElementId: 'updating', updateTargetId: 'status', onSuccess: Function.createDelegate(this, done) });">7</a>
 <a href="/Photos/Album?Page=8&amp;AlbumName=Jersey_Shore_1" onclick="Sys.Mvc.AsyncHyperlink.handleClick(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, loadingElementId: 'updating', updateTargetId: 'status', onSuccess: Function.createDelegate(this, done) });">8</a>
 <a href="/Photos/Album?Page=9&amp;AlbumName=Jersey_Shore_1" onclick="Sys.Mvc.AsyncHyperlink.handleClick(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, loadingElementId: 'updating', updateTargetId: 'status', onSuccess: Function.createDelegate(this, done) });">9</a>

Далее >> 

    </div>
</div>        
</body>
</html>

1 Ответ

2 голосов
/ 12 сентября 2009

Ваша проблема возникает из-за того, что instant.js работает автоматически при загрузке страницы. Когда вы загружаете изображения с помощью AJAX, изображения загружаются после полной загрузки страницы и после мгновенной работы.

Вместо instant.js используйте cvi_instant_lib.js, и после каждого загружаемого вами изображения с помощью AJAX вызывайте cvi_instant, чтобы «исправить» ваши изображения. Вы можете найти инструкции на сайте Instant для того, как это сделать.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...