Javascript函数在Firefox中运行多次在Chrome中只运行一次，为什么？

我有一个文件上传字段，我在其中添加了jQuery更改

在chrome中，loadImage功能将占位符图片替换为要上传图片的渲染。在firefox中，以下代码呈现3次（控制台中有3个“1”，但onchange处理程序中只有一个“2”），图像添加后会被删除

为什么在Firefox中会发生这种情况，我如何防止这种情况发生？

Coffeescript（如果有人喜欢更好地阅读js，我可以转换）：

Haml如果有帮助（#project_display_pic是文件字段的id）：

查看，它似乎为图像对象的

onload

和

onerror

事件调用了渲染回调。也许Firefox错误地将图像的缩放计算为加载事件或其他什么？或者，可能是由于没有充分的理由触发了错误事件

因此，快速修复可能是这样的：

# Builds a function to show the loaded image
# The function stores the last img object it received,
# and doesn't try to show the same one twice in a row
createRenderCallback = ->
  lastImg = null

  (img) ->
    return if img is lastImg # don't handle the same img twice
    # Note that if the image failed to load, `img` will be undefined
    # You may want to check for that before trying to append it
    $('#display_pic_preview > img').remove()
    $('#display_pic_preview').append(img)
    lastImg = img # remember the img

# Attach the file input's change handler (pretty much the same as before)
$('#project_display_pic').change (e) ->
  value = $(this).val().replace("C:\\fakepath\\","")
  $('#display_pic_uploader > p').text(value)
  loadImage e.target.files[0], createRenderCallback(), { maxWidth: 212 }

您可以在插件的代码中执行类似的操作，以避免它重新调用回调。或者你可以从插件中记录一些东西，以准确地了解发生了什么

---

编辑：由于将图像插入DOM会触发渲染回调，因此可以尝试以下操作：

createRenderCallback = ->
  lastImg = null

  (img) ->
    return if img is lastImg
    lastImg = img # <-- Move this line to here, i.e. before inserting the image
    $('#display_pic_preview > img').remove()
    $('#display_pic_preview').append(img)

---

firefox多次调用此函数时出错。此代码也应该有效（通过检查width属性来检查它是否是图像对象：

loadImage(file, function(image) {
        if(typeof(image.width) !== "number") { // make sure its an image and not an error
          return;
        }
}

---

我正在使用显示所选图像的图像预览。loadImage（）函数接受文件或Blob对象或简单图像URL（例如“”）作为第一个参数。如果文件或Blob作为参数传递，则如果浏览器支持URL API，则返回HTML img元素；如果浏览器支持FileReader对象，则返回false。哇，谢谢，堆栈溢出是难以置信的，您在这方面投入的时间超出了我的要求。我尝试了自定义回调，仍然是相同的故事，我想是的你对错误的看法是正确的，错误时它会触发回调，有趣的是，当我注释掉这两行$（'display#pic_preview>img'）。remove（）$（'display#pic_preview'）。append（img）我没有得到回调x 3，我会深入研究。@AlexMarchant有趣-我实际上认为可能是这样的（插入图像会触发回调），但由于这看起来很可笑，所以不予理会。有两件事你可以试试——我已经更新了我的答案

createRenderCallback = ->
  lastImg = null

  (img) ->
    return if img is lastImg
    lastImg = img # <-- Move this line to here, i.e. before inserting the image
    $('#display_pic_preview > img').remove()
    $('#display_pic_preview').append(img)

renderCallback = ->
  if img? # this function was called from an onload event
    img.onload = img.onerror = null

  else  # called from an onerror event
    @onload = @onerror = null

  $('#display_pic_preview > img').remove()
  $('#display_pic_preview').append(img) if img?

$('#project_display_pic').change (e) ->
  value = $(this).val().replace("C:\\fakepath\\","")
  $('#display_pic_uploader > p').text(value)
  loadImage e.target.files[0], renderCallback, { maxWidth: 212 }

loadImage(file, function(image) {
        if(typeof(image.width) !== "number") { // make sure its an image and not an error
          return;
        }
}