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({
```
只需将脚本从局部移动到您的布局中，所以它只运行一次。然后，使用类而不是id来附加插件：
```
<div class="frame" ...>
```
然后：
```
$('.frame').animate360({
```

HTML5 Viewer复制图像mvc.net

1 个答案: