elementUI 页面如果需要加载很多东西的时候, 自己定义的按钮或者弹出框dialog的文字就会显示在页面上, 一闪而过, 因此需要优化一下, elementUI 提供的loading有遮罩层, 具体使用就不说了, 下面提供的是普通的处理方法,简单实用!!

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <!-- import CSS -->

    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <style media="screen" type="text/css">

        #appLoading { width: 100%; height: 100%; }

        #appLoading span {

            position: absolute;

            display: block;

            font-size: 50px;

            line-height: 50px;

            top: 50%;

            left: 50%;

            width: 200px;

            height: 100px;

            -webkit-transform: translateY(-50%)  translateX(-50%);

            transform: translateY(-50%)  translateX(-50%);

        }

    </style>

</head>

<body>

<div id="appLoading">

    <span>Loading...</span>

</div>

<div id="app" style="display: none">

    <app>123</app>

</div>

<!-- import Vue before Element -->

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<!-- import JavaScript -->

<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>

    new Vue({

        el: '#app',

        data: function () {

        },

        //加载完成时调用

        created: function () {

        },

        //页面加载成功时完成

        mounted(){

            document.getElementById('app').style.display = 'block';

            document.getElementById('appLoading').style.display = 'none';

        },

        //方法

        methods: {

        },

    })

</script>

</body>

</html>

elementUI vue 页面加载的时候页面出现了黑字 页面优化处理 按钮弹出框文字的更多相关文章

  1. 从输入 URL 到页面加载完的过程中都发生了什么---优化

    这篇文章是转载自:安度博客,http://www.itbbu.com/1490.html 在很多地方看到,感觉不错,理清了自己之前的一些思路,特转过来留作记录. 一个HTTP请求的过程 为了简化我们先 ...

  2. 当页面加载完成时，JQ触发添加页面的元素的事件触发不了。。

    有下代码可知: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default. ...

  3. FaceBook页面加载技术

    1. 技术背景 FaceBook页面加载技术 试想这样一个场景,一个经常访问的网站,每次打开它的页面都要要花费6 秒:同时另外一个网站提供了相似的服务,但响应时间只需3 秒,那么你会如何选择呢?数据表 ...

  4. 一款由jquery实现的超炫的页面加载特效

    今天为大家带来一款由jquery实现的超炫的页面加载特效.连续的几个页面分开特效.最后由三维的线条由远至近消失,然后由近至远出现.效果超级梦炫.一起看下效果图: 在线预览   源码下载 实现的代码. ...

  5. 20180911 关于页面加载顺序引发的JS的undefined/null错误

    引用: 百度知道-HTML+JavaScript执行顺序问题 这是我在学习JS滚动播放图片案例意外遇到的一个问题,代码完成后console弹出错误警告: Uncaught TypeError: Can ...

  6. Selenium WebDriver- 指定页面加载时间

    #encoding=utf-8 import unittest import time from selenium import webdriver from selenium.webdriver i ...

  7. jQuery页面加载完毕事件及jQuery与JavaScript的比较

    1.jQuery概述 jQuery是一个JavaScript库,它集成了JavaScript.DOM.CSS和Ajax,简化了JavaScript编程,提倡write less, do more. 2 ...

  8. Selenium 页面加载慢

    Selenium 页面加载慢 问题描述: 使用Selenium获取网页,发现webdriver.get方法会阻塞直到网页全部加载完成,官方提供的三种wait方法仅对网页的ajax有比较明显的效果.对于 ...

  9. vue 使用v-cloak让在页面加载时不显示{{}}花括号

    官方说法: 这个指令保持在元素上直到关联实例结束编译. 和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准 ...

随机推荐

  1. 聊一聊Java如何接入招行一网通支付功能

    1.前提条件 相比较于支付宝和微信的支付功能接入这一块,银行相对来说更加严格,比如说支付宝,在你签约之前可以进行一些测试.但是银行来说就不是这样了,如果您现在要进行招行的支付功能开发的话,请务必先让相 ...

  2. 吴恩达机器学习笔记31-梯度检验（Gradient Checking）

    当我们对一个较为复杂的模型(例如神经网络)使用梯度下降算法时,可能会存在一些不容易察觉的错误,意味着,虽然代价看上去在不断减小,但最终的结果可能并不是最优解.为了避免这样的问题,我们采取一种叫做梯度的 ...

  3. PHP新特性Trait

    Trait是PHP 5.4引入的新概念,看上去既像类又像接口,其实都不是,Trait可以看做类的部分实现,可以混入一个或多个现有的PHP类中,其作用有两个:表明类可以做什么:提供模块化实现.Trait ...

  4. WPF中TreeView控件的使用案例

    WPF总体来说还是比较方便的,其中变化最大的主要是Listview和Treeview控件,而且TreeView似乎在WPF是一个备受指责的控件,很多人说他不好用.我这个demo主要是在wpf中使用Tr ...

  5. 使用idea配置tomcat将web项目跑起来

    链接:https://www.cnblogs.com/avivaye/p/6437555.html

  6. SPA架构的优点和缺点以及一些思考

    SPA是什么? 全称是单页面应用. 一个SPA就是一个WEB应用,它所需的资源(HTML CSS JS等),在一次请求中就加载完成,也就是不需刷新地动态加载. 用术语“单页”就是因为页面在初始化加载后 ...

  7. Python3.7 dataclass 介绍

    Posted on 2018年6月28日 by laixintao 1 Comment Python3.7 加入了一个新的 module:dataclasses.可以简单的理解成“支持默认值.可以修改 ...

  8. 微信小程序：防止多次点击跳转（函数节流）和防止表单组件输入内容多次验证（函数防抖）

    一.函数节流(throttle) **函数节流:一个函数执行一次后,只有大于设定的执行周期后才会执行第二次**.有个需要频繁触发函数,出于优化性能角度,在规定时间内,只让函数触发的第一次生效,后面不生 ...

  9. 【干货】利用MVC5+EF6搭建博客系统（四）（下）前后台布局实现、发布博客以及展示

    二.博客系统后台布局实现 2.1.这里所用的是MVC的布局页来实现的,后台主要分为三部分:导航.菜单.主要内容 代码实现: 这里把后台单独放在一个区域里面,所以我这里建立一个admin的区域 在布局页 ...

  10. socket的阻塞与非阻塞，同步与异步

    同步/异步主要针对C端: 同步:      所谓同步,就是在c端发出一个功能调用时,在没有得到结果之前,该调用就不返回.也就是必须一件一件事做,等前一件做完了才能做下一件事. 例如普通B/S模式(同步 ...