Javascript Image 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 была вызвана из глобального блока, чтобы зарегистрировать событие. В качестве альтернативы код регистрации события может быть помещен в глобальный блок. Все это, конечно, при условии, что идентификатор FULL_SRC был присвоен элементу в данном HTML-документе.

Учитывая комментарий, было опубликовано следующее:

(вариант 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);