主页 个人前端笔记 图像文字显示顺序及相对定位处理
admin
发表于2012-11-11 17:15:28    只看楼主 楼主
头衔:  精益求精
注册时间: 2012-10-07
用户组: 日常管理组
发帖数:  502
金币数:  186
短消息
mydiv.innerHTML=´<img src="test.jpg"><span style="position:relative;">This is a test</span>´;
乍看起来,这种写法是没问题的,但是如果在网速不好的条件下或是对页面美观比较看重的网站上,上述写法绝对是错误的。
因为图片和文字几乎同时被加载,但图片不一定立刻加载完成,所以文字会随着图片的不断加载,相对定位位置不断偏移。
解决方法
<script>
 function loadText(img){
  var txt=document.createElement(´span´);
 txt.style.cssText="";
 txt.innerHTML="";
 img.parentNode.appendChild(txt);
}
</script>
mydiv.innerHTML=´<img src="test.jpg" onload="loadText(this)">‘;
onload 事件会在页面或图像加载完成后立即发生。
这样等图片加载完全了以后,文字才会显示。

但是还有一种情况,比如鼠标移上去的时候显示a背景图片+文字,鼠标移开的时候显示b背景图片+文字,
如果按照刚才的方法,文字节点会被无限的加载,所以要通过判断来处理。
<script>
 function loadText(img){
 if(img.parentNode.getElementsByTagName("span").length>=1)
 {
return;
 }

  var txt=document.createElement(´span´);
 txt.style.cssText="";
 txt.innerHTML="";
 img.parentNode.appendChild(txt);
}
</script>
先判断图像父节点下所有span元素的个数,如果存在就不要再加节点了,不存在就加载节点。

回复人
回复内容

Powered BY YouYaX
个人自主开发论坛,从2010年10月份开发至今!

操作管理