Firefox 在拖放幽灵预览中不显示图像

Question

我正在尝试显示幽灵元素而不是默认浏览器预览以进行拖放。问题是在拖动时不显示幽灵元素内的Firefox图像。但是，如果我放下它，然后再次拖动图像 就会显示出来。

所以我认为这可能是某种与缓存相关的问题。但是在这种情况下我看不到如何预先缓存图像。

代码如下：

//html:

<div class="parent container">
<img class="element" src="http://www.thekrausemouse.com/wp-content/uploads/2016/03/Sample.jpg" draggable="true" />
</div>

//js:

document.querySelector(".element").addEventListener("dragstart", function(e) {
    var img = document.createElement("img");
    var div = document.createElement('div');
    div.style.width = '100px';
    div.style.height = '100px';
    div.style.position = 'fixed';
    div.style.top = '-1000000px';
    div.style.left = '-1000000px';
    div.style.border = '2px solid red';

    img.src = "http://www.thekrausemouse.com/wp-content/uploads/2016/03/Sample.jpg";
    img.style.width = '100px';
    img.style.height = '100px';
    div.appendChild(img);
    document.body.appendChild(div);
    e.dataTransfer.setData('text/plain', 'test');
    e.dataTransfer.setDragImage(div, 0, 0);
}, false);

小提琴： https://jsfiddle.net/etseq5cg/5/

重现步骤：

1) 打开 fiddle/运行 sn-p

2) 尝试拖动示例图片

实际：你会看到一个带有红色边框的空方块

预期：正方形，里面有图片。

要再次重现它，您需要强制重新加载页面（ctrl+f5）。这就是为什么我认为这是与缓存相关的问题。

注意：我知道我应该在 dragend 处理程序中从 DOM 中删除 ghost 元素，但这在这里并不重要。

更新：

1) 实际用例包括包含大量图像（~500）的视图，因此不能通过 js 预缓存图像。

2) 对于那些无法重现问题的人，这里是截图：首先你看到硬重载(ctrl+f5) 后的预览，然后是第二次拖动尝试。请注意，在这两种情况下，网络检查器的网络选项卡中都没有看到 http 请求。

Answer 1

当我在 Firefox 53（在 Windows 7 上）中运行 your jsfiddle 时，我看不到问题。重影图像和被拖动的图像具有相同的 URL，并且在拖动时始终显示重影图像。但是，我可以使用具有不同 URL 的幻影图像重现该问题。

您可以添加一个隐藏的img 控件来预加载重影图像。像这样的：

<div class="parent container">
    <img class="element" draggable="true" src="http://the.element.image" />
    <img class="imgGhost" src="http://the.ghost.image" />
</div>

根据我的测试，这些设置阻止了 Firefox 中的图像预加载：

• 用display: none隐藏元素
• 设置空大小（width: 0px 或 height: 0px）
• 将其移出视口（例如left: -10000px）

link prefetching 我也没有取得太大的成功。但是，visibility: hidden 似乎有效。隐藏图像元素的样式可以定义为：

.imgGhost {
    position: absolute;
    left: 0px;
    top: 0px;
    visibility: hidden;
}

该方法可以测试this jsfiddle中的两个可拖动图像。在dragstart 事件处理程序中，从隐藏元素中检索图像 URL：

img.src = this.parentNode.querySelector(".imgGhost").src;

但它可能是硬编码的。如果您愿意，您可以在页面加载时动态设置隐藏图像的src 属性。在 jsfiddle 中进行测试时，您可以在再次运行之前更改幻影图像名称（例如 225x225），以确保图像未被缓存。

---

根据您的评论，预加载图像不是一种选择。并且您对拖动的幻影图像使用相同的图像 URL。在这种情况下，您可以检查 this page 以查看是否有任何选项阻止重新加载图像。

在dragstart 事件处理程序中将div 控件添加到body 后，您还可以强制重新绘制布局。这可以通过调用div.offsetHeight来实现：

div.appendChild(img);
document.body.appendChild(div);
div.offsetHeight; // Force repaint

Answer 2

在css 设置.parent 伪类:hover 和.element background 到url("/path/to/image") 以获取:hover 的<img class="element" src="http://www.thekrausemouse.com/wp-content/uploads/2016/03/Sample.jpg" draggable="true" /> 父元素的图像。在dragstart 事件集div .className 到"element"。

.element {
  width: 100px;
  height: 100px;
  background: url("http://www.thekrausemouse.com/wp-content/uploads/2016/03/Sample.jpg");
  background-size: 100px 100px;
  
}

.parent:hover {
  background: url("http://www.thekrausemouse.com/wp-content/uploads/2016/03/Sample.jpg");
  background-size: 0px 0px;
}

<div class="parent container">

  <img class="element" src="http://www.thekrausemouse.com/wp-content/uploads/2016/03/Sample.jpg" draggable="true" />

</div>
    <script>
    function handleImage(e) {
      var div = document.createElement('div');
      div.style.width = '100px';
      div.style.height = '100px';
      div.style.position = 'fixed';
      div.style.top = '-1000000px';
      div.style.left = '-1000000px';
      div.style.border = '2px solid red';
      div.className = "element";
      document.body.appendChild(div);
      e.dataTransfer.setData('text/plain', 'test');
      e.dataTransfer.setDragImage(div, 0, 0);
    }
 document.querySelector(".element")
 .addEventListener("dragstart", handleImage, false);
  </script>

jsfiddle https://jsfiddle.net/etseq5cg/7/