对图像使用javascript instant.js库不会'；我不能使用ajax_Javascript_Asp.net Mvc_Image

对图像使用javascript instant.js库不会'；我不能使用ajax

javascript asp.net-mvc image

对图像使用javascript instant.js库不会'；我不能使用ajax,javascript,asp.net-mvc,image,Javascript,Asp.net Mvc,Image,我有一个asp.net-mvc网站，我使用下面的javascript库创建一个照片页面，在我所有的照片周围加上边框 http://www.netzgesta.de/instant/ 我刚刚更改了我的站点，通过ajax加载我的照片，而不是重新加载整个页面，尽管调试时生成了正确的html，但我没有看到任何图像： <div id="status"> <% Html.RenderPartial("AlbumGrid",Model); %> </div> 我

我有一个asp.net-mvc网站，我使用下面的javascript库创建一个照片页面，在我所有的照片周围加上边框

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

我刚刚更改了我的站点，通过ajax加载我的照片，而不是重新加载整个页面，尽管调试时生成了正确的html，但我没有看到任何图像：

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

我知道它与instant.js库有关，因为当我有以下内容时，它会崩溃：

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

但是如果我删除上面的类，并定期加载图像，一切都会正常工作（但我当然不会得到边界效果）。所以下面这个很好用

<img   src=\"...">

有人尝试过将这个库与ajax一起成功使用吗

编辑：我在下面添加了完整的源代码（剥离到最小值）：


函数完成（）{
警报（“完成”）；
}














页码：第1页，共9页1

下一步>>

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

您的问题之所以会出现，是因为当页面加载时instant.js会自动工作。当您使用AJAX加载图像时，图像将在页面完全加载并完成工作后加载

使用cvi_instant_lib.js代替instant.js，在使用AJAX加载每个图像后，调用cvi_instant来“修复”图像。您可以在instant的网站上找到操作说明。

谢谢。我看到了这个页面，但是当ajax完成时我该如何添加它呢？您需要编写Javascript，在ajax命令完成后运行。我不熟悉您的AJAX框架，因此无法提出更具体的建议。好的，我正在使用ajaxhelper，因此我在ajaxoptions标记中添加了一个oncomplete，并可以获得javascript回调。。在回调中，我放置了cvi_instant.modify（document.getElementById（“001”），{tilt:“left”}）；但是我仍然没有看到任何图像IMG标签有ID“001”吗？请确保分配给图像的ID是唯一的，否则getElementById（）将无法正常工作。你能给我看一个你正在使用的应用程序吗（或者一个简单的例子）-如果我可以参考特定的代码，我可以提供更多帮助。我已经在上面添加了完整的源代码，以查看是否有帮助。现在我只是在“done”方法中添加了一个警报，以证明它正在被调用（实际上是这样），但是当我在cvi_instant中添加警报时。似乎什么也没发生

<img   src=\"...">

<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>