js 拖拽图片禁止出现虚化图片

在 JavaScript 中，当你拖动图片时，有时会出现图片虚化的现象，这是因为浏览器默认在用户交互过程中会对图像资源进行预加载，以便提供更流畅的用户体验。然而，如果你希望禁用这种预加载，可以采取以下几种方法：

1. 使用 `draggable` 属性设置 `false` 或者 `e.preventDefault()` 阻止事件冒泡：

   const img = document.getElementById('your-image-id');
   img.draggable = false;
   img.addEventListener('dragstart', (e) => {
     e.preventDefault();
   });

2. 使用 canvas 或者 SVG 替代图片，并利用它们的拖放 API。因为 canvas 和 SVG 是基于矢量数据，不会像像素图片那样虚化。

3. 如果你想在特定场景下才禁用预加载，可以在实际需要拖拽时动态改变图片的 `src` 或者 `data-url` 为一个空值或占位图URL，直到拖拽结束再恢复原状：

   const img = document.getElementById('your-image-id');
   let originalSrc;

   img.addEventListener('mousedown', () => {
     originalSrc = img.src; // 或者 data-url
     img.src = 'placeholder-image-url'; // 占位图 URL
   });

   img.addEventListener('mouseup', () => {
     img.src = originalSrc; // 回到原始图片
   });