Javascript图片onLoad [英] Javascript Image onLoad

问题描述

 函数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事件不会被触发，因此你可能会做一点点攻击：

 函数FULL_IMAGE（fimage）{
 var loaded = false; 
函数loadHandler（）{
 if（loaded）{
 return; 
} 
 loaded = true; 
 / *你的代码* / 
} 
 var img = document.getElementById（'FULL_SRC'）; 
 img.onload = loadHandler; 
 img.src = fimage; 
 img.style.display ='block'; 
 if（img.complete）{
 loadHandler（）; 
} 
} 
  

Why does the onLoad not get triggered?

      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";
      }

解决方案

sometimes when image is retrieved from browser cache, onload event would not be fired, thus you may do a little hack:

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

这篇关于Javascript图片onLoad的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！