Javascript 当Chrome将图像从一个元素移动到另一个元素时，Firefox和Internet Explorer只需*移动*图像。我怎样才能解决这个问题？

如果我想将页面上的图像从一个元素移动到另一个元素，Firefox和Internet explorer只需移动图像，而Chrome实际上会重新ping图像源以获取内容。我如何才能强制Chrome不重新ping源代码，而只是将图像从一个容器移动到另一个容器

我可以通过将映像源设置为Asp.NET MVC控制器来确认这一点，并设置断点以查看请求的时间。以下是一个例子：

@{ ViewBag.Title = "Index"; }
<div></div>
<script type="text/javascript">
    window.tmpImg = new Image();
    tmpImg.src = "Home/ImgController";
    document.getElementsByTagName("body")[0].appendChild(tmpImg);
    setTimeout(function () {
        document.getElementsByTagName("div")[0].appendChild(tmpImg);
    }, 5000);
</script>

MVC控制器：

using System.Drawing;
using System.Drawing.Imaging;
using System.IO;
using System.Web.Mvc;

namespace Web.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
        public ActionResult ImgController()
        {
            // Set breakpoint in this controller
            Image i = Image.FromFile(@"C:\img.png");
            MemoryStream ms = new MemoryStream();
            i.Save(ms, ImageFormat.Png);
            return new FileContentResult(ms.ToArray(), "Image");
        }
    }
}

视图：

@{ViewBag.Title=“Index”}
setTimeout（函数（）{
document.getElementsByTagName（“div”）[0]。innerHTML=document.getElementsByTagName（“img”）[0]。outerHTML；
}, 5000);

当页面最初加载时，会命中

ImgController

控制器中的断点，这是预期的。但是当

setTimeout

javascript函数在5秒后执行时，

ImgController

中的断点第二次被击中，只有在Chrome中。在Firefox和Internet Explorer中，断点永远不会命中，因为它只是移动元素

我还尝试了

appendChild

，jQuery的

.html（）

，两者都有相同的结果

---

如何强制Chrome使用它在DOM中已经存在的元素，而不是重新ping服务器以重复内容？

断点可能会显示请求，返回304（未修改），实际上不会再次传输图像。您最好在调试器中查看浏览器的网络面板，并查看网络上发生的事情，而不是应用程序中的事件

---

我无法理解.NET为什么首先要到服务器上访问DOM事件。

我能够找到一个解决方案，以防任何人遇到同样的问题

我发现，如果我将图像声明为全局javascript变量，Chrome将不会重新查询服务器。下面是一个例子：

@{ ViewBag.Title = "Index"; }
<div></div>
<script type="text/javascript">
    window.tmpImg = new Image();
    tmpImg.src = "Home/ImgController";
    document.getElementsByTagName("body")[0].appendChild(tmpImg);
    setTimeout(function () {
        document.getElementsByTagName("div")[0].appendChild(tmpImg);
    }, 5000);
</script>

@{ViewBag.Title=“Index”}
window.tmpImg=新图像（）；
tmpImg.src=“主页/ImgController”；
document.getElementsByTagName（“body”）[0].appendChild（tmpImg）；
setTimeout（函数（）{
document.getElementsByTagName（“div”）[0].appendChild（tmpImg）；
}, 5000);

我的问题是，为什么Chrome还要再次查询服务器？其他浏览器不这样做，在我看来，这不是一个预期的行为。