Firefox不會在拖放幻影預覽中顯示圖像

Question

我正在嘗試顯示ghost元素而不是拖放的默認瀏覽器預覽。 問題是在拖動時不顯示ghost元素內的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);

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

重現步驟：

1）打開小提琴/運行片段

2）嘗試拖動樣本圖像

實際：你會看到一個帶紅色邊框的空方塊

預期：里面有圖像的方形。

要再次重現它，您需要強制重新加載頁面（ctrl + f5）。 這就是為什么我認為這是緩存相關的問題。

注意：我知道我應該在dragend處理程序中從DOM中刪除ghost元素，但這在這里並不重要。

更新：

1）實際用例包括具有大量圖像（~500）的視圖，因此不能通過js預先緩存圖像。

2）對於那些無法重現問題的人，這里是截圖：首先你看到硬重載后的預覽（ctrl + f5），然后是第二次拖動嘗試。 請注意，在這兩種情況下，Web檢查器中的網絡選項卡中都沒有看到http請求。

Answer 1

我在Firefox 53（在Windows 7上）運行你的jsfiddle時看不到問題。 重影圖像和拖動的圖像具有相同的URL，並且在拖動時總是顯示重影圖像。 但是，我可以使用具有不同URL的重影圖像重現該問題。

你可以添加一個隱藏的img控件來預加載ghost圖像。 像這樣的東西：

<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 （例如left: -10000px ）

鏈接預取我也沒有太大的成功。 但是， visibility: hidden似乎有效。 隱藏圖像元素的樣式可以定義為：

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

該方法可以在這個jsfiddle中測試兩個可拖動的圖像。 在dragstart事件處理程序中，從隱藏元素中檢索圖像URL：

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

但它可能是硬編碼的。 如果您願意，可以在加載頁面時動態設置隱藏圖像的src屬性。 在jsfiddle中進行測試時，您可以在再次運行之前更改重影圖像名稱（例如225x225），以確保圖像未被緩存。

---

根據您的評論，預裝圖像不是一種選擇。 並且您使用相同的圖像URL來拖動重影圖像。 在這種情況下，您可以檢查此頁面以查看是否有任何選項阻止重新加載圖像。

在dragstart事件處理程序中將div控件添加到body后，您還可以強制重新繪制布局。 這可以通過調用div.offsetHeight來實現：

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

Answer 2

在css set .parent偽類:hover和.element background到url("/path/to/image")來獲取圖像:hover of <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/