页面加载Loading

       在web项目开发中,经常有需要实现网页加载过程动画,就是在网页完全加载成功之前用一个动画在页面上替换整个加载过程,等dom全部加载完毕再移除该动画。

       这种动画的效果非常友好,能加强与客户的交互性,免得干等。

 

       本文件为大家介绍一个比较好用的Loading插件,非常简单。

        jQuery showLoading

        下载地址:http://thisiscontext.com/developer-tools

        在项目中引用:

        <script src="@Url.Content("~/Scripts/jquery-1.6.4.min.js")" type="text/javascript"></script>

        <script src="@Url.Content("~/Scripts/jquery.showLoading.min.js")" type="text/javascript"></script>

 

        即可实现效果了,实现代码如下:

        $("#_mainFrame").showLoading();
        var ifrm = $("#_mainFrame").get(0);
        ifrm.onload = ifrm.onreadystatechange = function () {
            if (this.readyState && this.readyState != 'complete') return;
            else {
                $("#_mainFrame").hideLoading();
            }
        };

 

       我这里是在一个iframe上面追加loading效果,当iframe中的内容加载完毕后消去loading效果。

       自此效果已经完成。

 

 

 

 

        

 

 

你可能感兴趣的:(Web,动画,dom)