像Gmail一样的loadingMessage style

最新推荐文章于 2023-06-06 14:58:47 发布

scott.cgi

最新推荐文章于 2023-06-06 14:58:47 发布

阅读量970

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascript 文章标签： gmail function dwr div image

本文链接：https://blog.youkuaiyun.com/tom_221x/article/details/3493993

Javascript 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种使用JavaScript创建加载提示的方法，包括文本和图片两种形式。通过简单的代码即可实现页面加载时显示自定义消息或图像的功能。

从dwr上搞下来改的，dwr从Gmail上搞下来的，呵呵～大家都在抄哦...

文字版

使用方法如下：

 //用的时候<script type="text/javascript" src="上面js文件"></script>

  //然后myLoadingMessage.loading("你的文本");

        myLoadingMessage.loading("改变你的文本");

        myLoadingMessage.unloading();//取消加载提示

图片版如下：

//图片版本的用法上面差不多只是文本改成image地址了 var myLoadingImage = function() { var loadingImage = "默认图片地址哦"; var disabledImageZone = document.getElementById('disabledImageZone'); var init = function(){ if (!disabledImageZone) { disabledImageZone = document.createElement('div'); disabledImageZone.setAttribute('id', 'disabledImageZone'); disabledImageZone.style.position = "absolute"; disabledImageZone.style.zIndex = "1000"; disabledImageZone.style.left = "0px"; disabledImageZone.style.top = "0px"; disabledImageZone.style.width = "100%"; disabledImageZone.style.height = "100%"; var imageZone = document.createElement('img'); imageZone.setAttribute('id','imageZone'); imageZone.setAttribute('src',imageSrc); imageZone.style.position = "absolute"; imageZone.style.top = "0px"; imageZone.style.right = "0px"; disabledImageZone.appendChild(imageZone); document.body.appendChild(disabledImageZone); } } return { loading:function(msg){ if(msg) loadingImage=msg; init(); document.getElementById('imageZone').src = loadingImage; disabledImageZone.style.visibility = 'visible'; }, unloading:function(){ init(); document.getElementById('disabledImageZone').style.visibility = 'hidden'; } } }();