Javascript 图像加载答案

【问题标题】：Javascript Image onLoadJavascript 图像加载
【发布时间】：2011-08-21 10:51:21
【问题描述】：

为什么 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";
      }

【问题讨论】：

顺便说一句，我发现了问题......它的onload不是onLoad......我认为L是大写的。大声笑
var image = document.getElementById('FULL_SRC'); ... 变量让你的代码更好，生活更轻松 :)

标签： javascript image events onload

【解决方案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();
    }
}

【讨论】：

不要将 loadHandler 直接分配给img.onLoad，这会破坏您分配给图像的任何其他onLoad 处理程序。而是使用img.attachEventListener('load', loadHandler);。
@dclowd9901 你的意思是 img.addEventListener('load', loadHandler); 吗？ :)
您可能需要强调img.complete 检查图像是否已被接收/下载。像这样将它直接放在您的代码之后意味着它已经被接收/下载，但不一定是这种情况。 AFAIK，complete 属性也可以表示已设置图像。或者下载失败，或者没有。关于它没有固定的规则，所以在跨浏览器实现方面是可怕的。更多参考请见stackoverflow.com/questions/12685844/…
@BiepbotVonStirling img.complete 检查专门用于 IE6，如果图像通过 HTTP 标头缓存，它将永远不会触发 load 事件，但将其 complete 属性设置为 true同步，是的，是IE6的bug
@otakustay 最好添加一个浏览器检查，这样您就不会意外破坏具有不同实现 img.complete 的浏览器。或者，为 IE6 的 onload 事件添加一个实现（很像 polyfill），以防止围绕错误进行编码

【解决方案2】：

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

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

在onload 中使用小写“l”。

【讨论】：

【解决方案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);

【讨论】：