HTML5 查看者重复图像 mvc.net

Question

我有一个正在加载图像的 HTML5 查看器。

 <div id="Frame" class="animateCreatorContainer" style="width:@ViewBag.ImgWidthHTML5Viewer; height:@ViewBag.ImgHeightHTML5Viewer; margin-left:1px; margin-top:1px;"></div>
    <script>
                            $(document).ready(function () {
                                $('#Frame').animate360({
                                    centerInWindow: false, // if switch to true it will center the image
                                    xmlPath: '@Url.Content("~/img/HTML/" + @ViewBag.PartNumber + "/")',
                                    objPath: '@Url.Content("~/img/HTML/" + @ViewBag.PartNumber + "/Images/")',
                                    iconPath: '@Url.Content("~/img/HTML/HTML5/Images/")',
                                });                                  
                            });
    </script>

渲染后，我在页面上看到了两张图片。一个较小，一个较大。

Generated Code in browser

Duplicate plus sign

我是否遗漏了插件设置中的某些内容来禁用双映像？

Answer 1

很可能，您将其作为一个部分包含在内并多次加载该部分，这意味着您随后要复制 JavaScript 代码并使其运行多次，从而复制chrome喜欢放大图标等

如果这不是被多次加载的部分，我仍然会打赌 JavaScript 被多次加载。例如，也许您的布局中已经有这个 JavaScript。

假设是这种情况，您有两个选择，尽管实际上您可能应该同时做这两个选择，即使其中一个足以解决问题：

确保每个实例都有一个唯一的 id 属性，然后让 JavaScript 的这一点指向特定的唯一 ID。例如，假设这是一个部分，你可以这样做：
```
@Html.Partial("MyPartial", someModel, new ViewDataDictionary(ViewData)
{
    { "id", "Frame1" }
});
```
然后，在你的部分：
```
<div id="@ViewData["id"]" ...>
    ...
    $('@ViewData["id"]').animate360({
```
只需将脚本从局部移出并移入您的布局，因此它只会运行一次。然后，使用 class 而不是 id 来附加插件：
```
<div class="frame" ...>
```
然后：
```
$('.frame').animate360({
```

HTML5 查看者重复图像 mvc.net

HTML5 Viewer duplicates image mvc.net

html

asp.net-mvc

jquery-plugins