本实例通过加载图片完成前，显示加载信息。

方法一、使用Img属性onload来实现

JS代码：

<script>
function clearhtml() {
  document.getElementById('aa').innerHTML = '加载完成';
}
function resrc(){
    document.getElementById('aa').innerHTML = '正在加载中...';
    var mycodeimg=document.getElementById('imgs');
    mycodeimg.src=mycodeimg.src+'?'+Math.random
    }
</script>

HTML代码：

<div style="margin:300px 0px 0px 300px;">
<div id="aa">点击图片</div>
<div><img src="http://www.xcsoft.cn/Public/images/logo.png" onClick="resrc()" id="imgs" onload="clearhtml();" border="0" /></div>
</div>

方法二、使用Image对象来实现

JS代码：

<script>
function loadimg(str){
    var imgs=document.getElementById("imgs")
    var aa=document.getElementById("aa")
    aa.innerHTML='加载中...'
    var img=new Image();
    img.src=imgs.src+'?'+Math.random()
    img.onload=function(){
       document.getElementById("imgs").src=img.src
        aa.innerHTML='加载完成'
        }
    }
</script>

HTML代码：

<div style="margin:300px 0px 0px 300px;">
<div id="aa">点击图片</div>
<div><img src="http://www.xcsoft.cn/Public/images/logo.png"  id="imgs" onclick="loadimg()" border="0" /></div>
</div>

       希望对大家有所帮助！

标签  技巧网页制作

按键盘左右方向键可快速浏览上一篇(←)、下一篇(→)