原代码就不展示了,以下代码所表达的意思相同
<html>
<head>
<title>标题</title>
<meta content="text/html;charset=utf-8"/>
<script type="text/javascript">
function picture(){
var img1 = "${mImg.img1}"; /*el表达式*/
if(img1 != null && img1 != undefined){
var html1 = '';
html1 += "<img src='images/1.png' />"
$('#img1').append(html1);
}
var img2 = "${mImg.img2}"; /*el表达式*/
if(img2 != null && img2 != undefined){
var html2 = '';
html2 += "<img src='images/1.png' />"
$('#img2').append(html2);
}
}
</script>
<head>
<body onload="picture()">
<table>
<tr>
<td id="img1">
</td>
<td id="img2">
</td>
</tr>
<table>
</body>
</html>
测试的时候就出现了问题,img1没问题,始终能出来的,但是img2有时候就出不来,特别是第一次加载这个页面的时候。后来实在找不出原因我就把onload函数换成了jquery的$(function(){})函数就没有这样的bug,请教一下这是为什么,望大佬们出来解释一下!谢谢!!!
你试一下下面的代码,先弹出了alert,页面再显示内容,就知道加载顺序了,body的onload在body的内容渲染之前就开始执行了。
而你的picture()是要取页面的元素并赋值,如果对应的元素还没有渲染出来,你赋值肯定失败了。
而jquery的$(function(){})是在页面渲染完成后开始执行的,所以没问题
<!DOCTYPE html>
<html>
<head>
<script>
function load()
{
alert("页面已加载!");
}
</script>
</head>
<body onload="load()">
<h1>Hello World!</h1>
</body>
</html>