多语言展示
当前在线:739今日阅读:2今日分享:38

网页图片加载,加载效果

网页图片加载,加载效果实现
工具/原料

已安装Dreamweaver或其它网页编辑器的电脑一台

浏览效果
1

加载中

2

加载完成

3

加载提示信息消失END

HTML代码

在body标签写HTML代码,图片src路径上百度图片复制一个图片路径就行了,注意:要用网页上的图片路径,不然效果可能实现不了,或者一闪而过。END

CSS样式代码

写入CSS样式代码END

JS脚本代码

写入JavaScript脚本代码END

完整代码(非图片可复制)
1

HTML代码:

图片正在加载...

2

CSS代码:#box { width:620px; height:700px; margin:0 auto; position:relative; z-index:1; border:10px #F09 double; }#box span { width:200px; height:200px; border:1px solid #CC3; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; position:absolute; z-index:2; top:50%; left:50%; margin-top:-100px; margin-left:-100px; background:#9C0; color:red; text-align:center; font-size:24px; line-height:200px; font-weight:bold;}

3

JavaScript代码:window.onload=function (){    var oBox=document.getElementById('box');    var oSpan=document.getElementsByTagName('span')[0];    var oImg=document.getElementsByTagName('img')[0];        function txtOK(){        oSpan.innerHTML='加载完成!';        oSpan.style.color='green';        oSpan.style.background='#CCC';        oSpan.style.opacity='0.8';        setTimeout(function (){            oSpan.style.opacity='0.3';            oSpan.style.display='none';        },1000);    }        var src = oImg.getAttribute('src');      oImg.setAttribute('src','');        oImg.onload=function (){        txtOK();    };};END

注意事项

主要用图片onload属性,很简单吧。

推荐信息