Javascript 图像加载
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5933230/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript Image onLoad
提问by Shane Larson
Why does the onLoad not get triggered?
为什么 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";
}
回答by otakustay
sometimes when image is retrieved from browser cache, onload event would not be fired, thus you may do a little hack:
有时从浏览器缓存中检索图像时，不会触发 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();
}
}
回答by Shane Larson
In my original code I used onLoadnot onload... the second line of code should read
在我的原始代码中，我onLoad没有使用onload......第二行代码应该是
document.getElementById("FULL_SRC").onload = function(){
with a lowercase "l" in onload.
用小写的“ l”，在onload。
回答by sosc
The definition of the event is found inside of a function block. While I have not referenced the ECMAScript specification, I can only guess that the function keyword associates the function body code with the FULL_IMAGE symbol and does not actually enter/execute the code. Therefore, it becomes necessary for the function FULL_IMAGE to be called from the global block in order to register the event. Alternatively, the event registration code can be placed in the global block. This is all of course assuming that a FULL_SRC id has been given to an element on the given HTML document.
事件的定义可在功能块内找到。虽然我没有参考 ECMAScript 规范，但我只能猜测 function 关键字将函数体代码与 FULL_IMAGE 符号相关联，并没有实际输入/执行代码。因此，必须从全局块调用函数 FULL_IMAGE 以注册事件。或者，事件注册码可以放在全局块中。这当然是假设已经为给定 HTML 文档中的元素提供了 FULL_SRC id。
Given the comment, the following has been posted:
鉴于评论，已发布以下内容：
(Option 1)
（选项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";
}
(Option 2)
（选项 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);
