Javascript图像onLoad

Question

为什么onLoad没有被触发？

      function FULL_IMAGE(fimage){
        document.getElementById("FULL_SRC").onLoad = function(){
          offsetTop = document.getElementById("FULL_SRC").height / 2;
          offsetLeft = document.getElementById("FULL_SRC").width / 2;
          document.getElementById("FULL_SRC").style.marginTop="-"+offsetTop+"px";
          document.getElementById("FULL_SRC").style.marginLeft="-"+offsetLeft+"px";
        }
        document.getElementById("FULL_SRC").src=fimage;
        document.getElementById("FULL_VIEW").style.display="block";
      }

Answer 1

有时从浏览器缓存中检索图像时，onload事件不会被触发，因此你可能会做一些黑客攻击：

function FULL_IMAGE(fimage) {
    var loaded = false;
    function loadHandler() {
        if (loaded) {
            return;
        }
        loaded = true;
        /* your code */
    }
    var img = document.getElementById('FULL_SRC');
    img.addEventListener('load', loadHandler);
    img.src = fimage;
    img.style.display = 'block';
    if (img.complete) {
        loadHandler();
    }
}

Answer 2

在我的原始代码中，我使用了onLoad而不是onload ...第二行代码应该是

document.getElementById("FULL_SRC").onload = function(){

在l中使用小写“onload”。

Answer 3

事件的定义可在功能块中找到。虽然我没有引用ECMAScript规范，但我只能猜测function关键字将函数体代码与FULL_IMAGE符号相关联，并且实际上并不输入/执行代码。因此，有必要从全局块调用函数FULL_IMAGE以便注册事件。或者，事件注册码可以放在全局块中。当然，假设已经为给定HTML文档中的元素提供了FULL_SRC id。

鉴于评论，已发布以下内容：

（选项1）

  document.getElementById("FULL_SRC").onLoad = function(){
    offsetTop = document.getElementById("FULL_SRC").height / 2;
    offsetLeft = document.getElementById("FULL_SRC").width / 2;
    document.getElementById("FULL_SRC").style.marginTop="-"+offsetTop+"px";
    document.getElementById("FULL_SRC").style.marginLeft="-"+offsetLeft+"px";
  }

  function FULL_IMAGE(fimage){
    document.getElementById("FULL_SRC").src=fimage;
    document.getElementById("FULL_VIEW").style.display="block";
  }

（选项2）

  function FULL_IMAGE(fimage){
    document.getElementById("FULL_SRC").onLoad = function(){
      offsetTop = document.getElementById("FULL_SRC").height / 2;
      offsetLeft = document.getElementById("FULL_SRC").width / 2;
      document.getElementById("FULL_SRC").style.marginTop="-"+offsetTop+"px";
      document.getElementById("FULL_SRC").style.marginLeft="-"+offsetLeft+"px";
    }
    document.getElementById("FULL_SRC").src=fimage;
    document.getElementById("FULL_VIEW").style.display="block";
  }

  FULL_IMAGE (myParameter);