javascript - Firefox 在拖放重影预览中不显示图像

Question

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

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

代码如下:

//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);

fiddle : https://jsfiddle.net/etseq5cg/5/

重现步骤:

1) 打开 fiddle /运行片段

2) 尝试拖动示例图片

实际:您会看到一个带有红色边框的空方 block

预期:正方形，里面有图像。

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

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

更新:

1) 实际用例包括具有大量图像(~500)的 View ，因此无法通过 js 预缓存图像。

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

Answer 1

我在运行 your jsfiddle 时看不到问题在 Firefox 53(在 Windows 7 上)。重影图片和被拖拽的图片有相同的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)
• 将其移出视口(viewport)(例如 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查看是否有任何选项阻止重新加载图像。

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

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