为什么在调用$ {document）.ready（function（）{…}）之后，对document.getElementById调用却返回null？
[英]Why am I getting null for a document.getElementById call, after $(document).ready(function() { … }) is called?
问题描述
Have a small example. 
有一个小例子。 I'm probably missing something basic, it's been a while since I worked with javascript. 我可能缺少一些基本的知识，自从我使用javascript以来已经有一段时间了。
My issue is I'm getting the error (in Chrome developer tools): "Uncaught TypeError: Cannot set property 'src' of null at Image.image1.onload (index.html:15)" 我的问题是（在Chrome开发者工具中）出现错误： "Uncaught TypeError: Cannot set property 'src' of null at Image.image1.onload (index.html:15)"
It seems like a straight forward error. 这似乎是直接的错误。 However, I believe the document should already be loaded when this is getting called because of the $(document).ready(function(){imageA();}); 但是，由于$(document).ready(function(){imageA();});我相信在调用此文件时应该已经加载了该$(document).ready(function(){imageA();}); . 。 So I don't know why it can't find the element #image_holder . 所以我不知道为什么找不到元素#image_holder 。
It's a pretty small example: 这是一个非常小的示例：
<!DOCTYPE>
<html>
<head>
<title>Image Quiz</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
var imageASelection = 1;
/* ImageA */
function imageA() {
var image1 = new Image();
image1.onload = function() {
document.getElementById('image_holder').src = this.src;
}
image1.src="images/ImageA.jpg";
$('html, body, #map').html('\
<map name="image-map">\
<area onclick="imageAOption1();" coords="827,1305,297,795" shape="rect">\
<area onclick="imageAOption2();" coords="1361,1307,839,800" shape="rect">\
<area onclick="imageAOption3();" coords="1370,792,1888,1300" shape="rect">\
<area onclick="imageAOption4();" coords="1895,788,2431,1305" shape="rect">\
<area onclick="imageANext();" coords="2431,1640,2146,1479" shape="rect">\
</map>');
}
function imageAOption1() {
imageASelection = 1;
}
function imageAOption2() {
imageASelection = 2;
}
function imageAOption3() {
imageASelection = 3;
}
function imageAOption4() {
imageASelection = 4;
}
function imageANext() {
imageB();
}
$(document).ready(function() {
imageA();
})
</script>
</head>
<body>
<img id="image_holder" usemap="#image-map">
<div id="map"></div>
</body>
</html>
Thanks for any help! 谢谢你的帮助！
And if you're wondering what I'm trying to do. 而且，如果您想知道我要做什么。 I'm trying to load an image in the background. 我正在尝试在后台加载图像。 I will have multiple images, but I don't want to see a flicker. 我将有多张图像，但是我不想看到闪烁。 So I'm trying to load the image in the background. 因此，我正在尝试在后台加载图像。 If I'm approaching this wrong, please let me know. 如果我要解决这个问题，请告诉我。
Thanks! 谢谢！
1 个解决方案
解决方案1
0 已采纳 2019-03-22 23:25:33
When you do 当你做
$('html, body, #map').html('\
<map name="image-map">\
<area onclick="imageAOption1();" coords="827,1305,297,795" shape="rect">\
<area onclick="imageAOption2();" coords="1361,1307,839,800" shape="rect">\
<area onclick="imageAOption3();" coords="1370,792,1888,1300" shape="rect">\
<area onclick="imageAOption4();" coords="1895,788,2431,1305" shape="rect">\
<area onclick="imageANext();" coords="2431,1640,2146,1479" shape="rect">\
</map>');
you're overriding the entire body, replacing your image; 您正在覆盖整个身体，替换您的图像； by the time the image is loaded, it is not in the document. 到图像加载时，它不在文档中。
Perhaps you wanted to replace #map rather than the entire body ? 也许您想替换#map而不是整个正文？
then you should look it up by $('#map') , or $('html body #map') without the commas. 那么您应该通过$('#map')或$('html body #map')进行$('html body #map')但不要使用逗号。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.