Safari 上的 setDragImage 意外崩溃

我很难确定为什么 Safari 6.0+ 在尝试使用 setDragImage() 方法时意外崩溃。

我有一个 Dragstart 事件，我想在发生此事件时附加背景图像。记录的方法是在事件接线上使用 setDragImage() 方法。这在 Firefox 和 Chrome 中运行得非常好。

我知道这是可能的，因为当我跑步时这个网站使用 Safari 浏览器，拖动图像效果完美。

然而，在我的简单的例子它爆炸了。

HTML:

 <div  draggable='true' class='dragme'>
  </div>

JavaScript：

var dragMe = document.querySelector('.dragme');

dragMe.addEventListener('dragstart', function(e)
{
    e.dataTransfer.setData('Test', 'some data');   
    var img = document.createElement("img");   
    img.src = "http://kryogenix.org/images/hackergotchi-simpler.png";
    e.dataTransfer.setDragImage(img, 0, 0);
}, false);

CSS:

.dragme
{
  border:1px solid red;
  height:100px;
  background-color:blue;
}

我已经确定，如果您在 setDragImage() 方法上使用的图像元素尚未加载，浏览器将线程中止。修复方法很简单。确保在调用该方法之前加载图像元素。最简单的方法是在事件外部创建图像元素。

//Preload the image
var img = document.createElement("img");   
img.src = "http://kryogenix.org/images/hackergotchi-simpler.png";

dragMe.addEventListener('dragstart', function(e)
{
    e.dataTransfer.setData('Test', 'some data');   
    e.dataTransfer.setDragImage(img, 0, 0);
}, false);