top
元旦节到了,元旦节快乐...

固定当前背景  反馈、咨询、建议、留言等,请点这里[Alt+G]

本栏相关
其他文章
JavaScriptJavaScript当前位置:首页 >>开发技巧>>JavaScript
javascript图片加载前显示别的信息
编辑admin 发布时间2014-09-05 浏览量2949 来源本站编辑 特大
摘要: 在图片未加载完前,可以先显示其他提示信息

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

方法一、使用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>

       希望对大家有所帮助!

标签  技巧网页制作

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


反馈/咨询/建议/留言(GuestBook)
您好,怎么称呼您!
您的姓名:
上一步:鼠标向上滚动/左方向键(←)
下一步或完成:鼠标向下滚动/Tab键/右方向键(→)
如果您有空的话,可以填一下您的相关信息!
您的电话:
您的邮箱:
现在,请填写您想要了解的信息!
信息内容:
验证码: 看不清?点图片刷新