图片全部加载完成之后再显示页面ui,公司项目里用上,自己写的几行代码

简介: 说明: -----onload事件   这里我并没有考虑ie的兼容性 因为项目是移动端的; -----求大神指正~ -----自己测试正常 页面没加载完之前会有一个提示 /*******************************下面是代码*********************...

 

说明:

-----onload事件   这里我并没有考虑ie的兼容性 因为项目是移动端的;

-----求大神指正~

-----自己测试正常 页面没加载完之前会有一个提示

/*******************************下面是代码*************************************/

//loding
                        
 //创建一个显示loding字样的遮罩        
var zhezhao1 = "<div class='zhezhao1' style='width:100%;height:"+$(window).height()+"px; position:fixed; top: 0; left: 0; z-index:2999;'>";
                             zhezhao1 += "<div class='zhezhaobg' style='width:100%;height:100%; background-color:#000000;opacity:0.8;'><\/div>";
                             zhezhao1 += "<div style='position:absolute;top:0;bottom:0;left:0;right:0; margin:auto; width:3rem;height:1rem; font-size:0.6rem; color:#ffcb99;'>LODING...<\/div>"
                             zhezhao1 +="</div>";
//把所有的img文件放到数字imgattr里    并事先准备好对象变量 循环变量 imglength;
var imgattr=new Array(),i=0,imgatrlen,imgobj=new Array();
    $('body').append(zhezhao1);
    imgattr = [
        '/jiuzhuang/img/bz-bg.jpg',
        '/jiuzhuang/img/content-tibg.jpg',
        '/jiuzhuang/img/dl.png',
        '/jiuzhuang/img/leftbar-bg.png',
        '/jiuzhuang/img/leftbar-bg2.png',
        '/jiuzhuang/img/leftbaricon.png',
        '/jiuzhuang/img/main-bg.jpg',
        '/jiuzhuang/img/offsrk-bg.jpg',
        '/jiuzhuang/img/_MG_2825.jpg',
        '/jiuzhuang/img/qywh.jpg'
    ];
    imgatrlen = imgattr.length;
    var loadlen = 0;
    //这里用了一个递归函数
    lodingpo(i,imgatrlen);
    function lodingpo(i,imgatrlen){
        imgobj = new Image();
        imgobj.src=imgattr[i];
        //加载完成loadlen++   并且形成一个递归循环
        imgobj.onload = function(){
            loadlen++;
            if(loadlen>=loadlen){
                $('.zhezhao1').remove();
            }
            i++;
            if(i<imgatrlen){
                lodingpo.callee(i,imgatrlen);
            }else{
                $('.zhezhao1').remove();
            }
        }
    }
    //加载超时  10秒
    setTimeout(function(){
        $('.zhezhao1').remove();
    },10000);

======================================================== 转载请注明出处。
目录
相关文章
|
5月前
|
API Android开发
Android项目架构设计问题之选择和使用合适的UI库如何解决
Android项目架构设计问题之选择和使用合适的UI库如何解决
58 0
|
5月前
|
C# 开发者 设计模式
WPF开发者必读:命令模式应用秘籍,轻松简化UI与业务逻辑交互,让你的代码更上一层楼!
【8月更文挑战第31天】在WPF应用开发中,命令模式是简化UI与业务逻辑交互的关键技术,通过将请求封装为对象,实现UI操作与业务逻辑分离,便于代码维护与扩展。本文介绍命令模式的概念及实现方法,包括使用`ICommand`接口、`RelayCommand`类及自定义命令等方式,并提供示例代码展示如何在项目中应用命令模式。
62 0
|
5月前
|
开发者 Android开发 UED
打造流畅应用:深入探索如何在Xamarin项目中选择并实现最佳UI/UX设计的实践指南
【8月更文挑战第31天】在数字化时代,UI/UX设计成为应用成功的关键。Xamarin以高效开发和强大兼容性著称,其设计理念“一次编写,处处运行”需充分适应多平台特性,提供一致体验。选择Xamarin.Forms或结合Xamarin.Native可实现跨平台UI设计;遵循各平台设计指南,保持布局一致性和简洁性;通过用户测试不断优化。最终,结合技术和用户需求,打造美观实用的应用,脱颖而出。
61 0
|
6月前
|
异构计算 Python
30行代码实现一个带UI界面的图片背景移除工具:并附带web网页
人工智能技术正处于蓬勃发展中,移除图片背景的方法众多,涵盖了各式各样的实现途径和模型。然而,这些方法往往在安装和配置环境方面稍显复杂。今天,介绍一种极其简便的方法——大约30行代码,就能实现这一功能。虽然相比之下可能稍显简单,但对于不太苛刻的需求来说,这种方法颇为方便实用。
|
6月前
|
前端开发 JavaScript
零基础学 Vue + Element UI 第01步 —— 搭建开发环境、创建项目、修改默认模板、启动项目、访问项目
零基础学 Vue + Element UI 第01步 —— 搭建开发环境、创建项目、修改默认模板、启动项目、访问项目
82 1
|
6月前
|
JavaScript
vue + element UI【实战】音乐播放器/语音条(内含音频的加载、控制,事件监听,信息获取,手机网页阴影的去除等技巧)
vue + element UI【实战】音乐播放器/语音条(内含音频的加载、控制,事件监听,信息获取,手机网页阴影的去除等技巧)
125 1
|
7月前
|
前端开发 JavaScript Java
SSMP整合案例第六步 在前端页面上利用axios和element-ui与后端交互实现增删改
SSMP整合案例第六步 在前端页面上利用axios和element-ui与后端交互实现增删改
56 1
|
7月前
|
缓存 JavaScript 测试技术
如何创建一个VUE3项目并使用Element UI插件
如何创建一个VUE3项目并使用Element UI插件
|
6月前
|
安全 前端开发 数据安全/隐私保护
会员系统03-前台系统UI,利用页面展示大宗农产品价格走势曲线,添加银行卡,前还要进行实名认证,密码密文,隐私安全
会员系统03-前台系统UI,利用页面展示大宗农产品价格走势曲线,添加银行卡,前还要进行实名认证,密码密文,隐私安全
|
6月前
|
JavaScript
vue项目中升级element ui(含常见报错及解决方案,如表格不显示,el-table无效, “__v_isRef“ is not defined,Use :deep() instead)
vue项目中升级element ui(含常见报错及解决方案,如表格不显示,el-table无效, “__v_isRef“ is not defined,Use :deep() instead)
78 0