javascript - Chrome 在将图像从一个元素移动到另一个元素时重新加载图像，而 Firefox 和 Internet Explorer 只是*移动*图像。我该如何解决这个问题？

Question

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

我可以通过将图像源设置为 Asp.NET MVC Controller 来确认这一点，并设置一个断点以查看它何时被请求。这是一个例子:

MVC Controller :

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"; }
<img src="Home/ImgController" />
<div></div>
<script type="text/javascript">
    setTimeout(function () {
        document.getElementsByTagName("div")[0].innerHTML = document.getElementsByTagName("img")[0].outerHTML;
    }, 5000);
</script>

当页面最初加载时，ImgController Controller 中的断点被命中，这是预期的。但是，当 setTimeout javascript 函数在 5 秒后执行时，ImgController 中的断点将被第二次命中仅在 Chrome 中。在 Firefox 和 Internet Explorer 中，断点永远不会命中，因为它只是移动元素。

我也尝试过 appendChild 和 jQuery 的 .html()，两者都有相同的结果。

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

Answer 1

我能够找到解决方案，以防有人遇到同样的问题。

我发现如果我将图像声明为全局 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>