Question

我使用图像放大镜http://asp-net-by-parijat.blogspot.in/2014/09/jquery-zoom-image-on-mouseover-in.html放大图像。它工作正常，但我使用java脚本来更改图像的src但放大时不刷新它仍然显示旧图像但图像已更改。我改变图像的脚本：

function SwitchPic(a) {
    $("#img").attr("src", a );
    $("#example4").attr("href", a );
}

我使用放大镜js的HTML代码

<img data-toggle="magnify" id="img" style="width:288px;" alt="example4" src="~/Images/Product/abc.jpg" />

HTML，我调用java脚本来更改图像src

<a onclick='SwitchPic("/Images/Products/xyz.jpg")'>
    <img class="thumbnail" style="width: 128px; display:inline-block;" src="~/Images/Products/xyz.jpg" />
</a>

Answer 1

如果您查看Magnify代码，您会看到此初始值设定项：

$('[data-toggle="magnify"]').each(function () {
    var $mag = $(this);
    $mag.magnify()
})

放大图片未获得更新的原因是Magnify初始化程序已经运行且无法观察任何src更改。您可以通过在SwitchPic中添加手动调用来解决此问题：

function SwitchPic(a) {
  img = $("#img")
  img.attr("src", a );
  img.magnify()
}

这里是proof of concept。

如何在使用放大镜js时更改src时刷新img src？

1 个答案: