页面加载顺序问题,影响视觉效果,使用loading解决。

原创 2017年05月02日 17:06:14

静态页面,作为背景的图标先显示,文字后显示。根本原因是:(加载顺序)
head标签里(link标签-css文件)-> body里的内容 -> src的script文件 ->页面中写入的js。这里就解释的通了,我的图标都是写在css文件里,所以他要一行行的执行css,将图标都加载出来之后,才开始显示文字信息。我觉着这样的效果不好,用户一定不会等待4s钟的时间看你白白的页面。于是有了下面的简单优化方法。

首先展示问题图片,请欣赏:
    <dl>
        <dd>
            <span></span>
        </dd>
        <dt>考勤打卡</dt>
    </dl>
    <dl>
        <dd>
            <span></span>
        </dd>
        <dt>电话会议</dt>
    </dl>
    <dl>
        <dd>
            <span></span>
        </dd>
        <dt>钉邮</dt>
    </dl>

垃圾代码,可维护性为 0

.main #myapp dl:first-child dd span {
    background:url(../images/icon/attend-red.png) no-repeat;
    background-size:100%;
    -webkit-background-size:100%;
}
.main #myapp dl:nth-child(2) dd span {
    background:url(../images/icon/tele-meet.png) no-repeat;
    background-size:100%;
    -webkit-background-size:100%;
}
.main #myapp dl:nth-child(3) dd span {
    background:url(../images/icon/ding-mail.png) no-repeat;
    background-size:100%;
    -webkit-background-size:100%;
}

最后的显示结果是:部分显示
这里写图片描述
很丑,很影响美观。经过一段时间的洗礼,他就变成了这个样子:图标全部显示(点击此处查看图片)。仍然是不好看的,tab标签页的文字都没显示出来。

优化部分:
将一会要加载的图标,都放在dd的data-src中,
            <dl>
                <dd data-src='style/images/icon/leave.png'>
                    <span></span>
                </dd>
                <dt>
                    <div>请假</div>
                </dt>
            </dl>
            <dl>
                <dd data-src='style/images/icon/border.png'>
                    <span>0</span>
                </dd>
                <dt>
                    <div>待我审批</div>
                </dt>
            </dl>

并且初始加载的时候,给每个dd内的span 加背景样式

dl dd span {
    display:inline-block;
    width:30px;
    height:30px;
    line-height:30px;
    background:url(../images/loading-green.gif) no-repeat;
    background-size:100%;
}

这里写图片描述
减少了css带给页面的压力,loading图片瞬间就出来了,然后再利用js,将dd 内所有spanremove掉,再根据$('span').html() 创建新元素,追加到dd 下。

        function setImg(index) {
            var dlists = $('dd');
            var src = $(dlists[index]).data('src');
            var dImg = '<img src="'+src+'" />';
            if ($(dlists[index]).find('img').length == 0) {
                var text = $(dlists[index]).find('span').html();
                if(text!=''){
                    var btext = '<b>'+text+'</b>';
                    $(dlists[index]).append(btext);
                }
                $(dlists[index]).find('span').remove();
                $(dlists[index]).append(dImg);
            }
        }
        function loadImg() {
            var dlists = $('dd');
            for (var i = 0; i < dlists.length; i++) {
                    var dlist = dlists[i];
                    setTimeout("setImg(" + i + ")", 500);
            }
        };

·最后的结果·很流畅的出来了
这里写图片描述

这算是曲线救国吧,因为现在水平低,暂时没有更好的办法,望若有大神路过此地指点一二,或把思路留下,我们一起探讨。

源码下载:http://download.csdn.net/detail/qq_31164127/9832379

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_31164127/article/details/71083706

页面加载样式闪现问题

css样式闪现,页面加载顺序
  • fengjingyu168
  • fengjingyu168
  • 2017-06-07 15:17:21
  • 696

js中页面加载完成后执行的几种方式及执行顺序

页面加载完成后执行的几种方式:1:使用jQuery的$(function){};2:使用jquery的$(document).ready(function(){});3:使用jQuery的$(wind...
  • yangrenjunjiayou
  • yangrenjunjiayou
  • 2017-04-25 09:05:19
  • 31614

给页面加loadding动画

首次打开网页时,因为需要加载一些第三方js包的原因,页面内容显示出来会有或长或短的延迟时间,如果延迟时间太长,那么就需要在这之前加入loading动画来实现一个过渡效果在网上找到一个不错的CSS加载动...
  • shuaizi96
  • shuaizi96
  • 2017-08-23 14:19:33
  • 383

模态框----Bootstrap Modals基础使用详解

最近项目中用到了Bootstrap模态框,收录下来: 一、引用的文件 前提是需要引用jquery哦: 二、举例样式 三、html引用规则  class="modal fade...
  • u013938465
  • u013938465
  • 2015-08-31 16:47:12
  • 15611

js优先加载,js最先加载,js优先于html加载

今天遇到一个要用js拦截的问题,所以要优先执行js,或者在页面加载之前执行js 1、在网上搜了好多相关的方法,都不行,如图:      有说用ready方法的,有说用onload方法的,我都...
  • kzdwts
  • kzdwts
  • 2017-11-02 20:31:02
  • 1606

几种常见的载入中、loading页面效果的实现方法总结

原创被我打死了,我就是原创。 网页加载过程中提示“载入中…”,特别是使用动画效果,可以一个“等待”的温馨提示,用户体验很不错。 先说最简单的第一种,原理就是,在网页载入时在页面最中间打入一...
  • sdta25196
  • sdta25196
  • 2017-11-30 13:34:38
  • 1135

Vue2.0 http请求以及loading展示(续)

http请求和loading
  • sinat_35515778
  • sinat_35515778
  • 2017-05-18 10:31:08
  • 8152

VUE页面加载闪现代码

vue.js 在加载的时候会出现闪现代码的情况css中加入:[v-cloak] { display: none; } html页面: {{ message }} ...
  • Androidqwe
  • Androidqwe
  • 2017-04-19 10:28:15
  • 1177

页面加载顺序问题,影响视觉效果,使用loading解决。

静态页面,作为背景的图标先显示,文字后显示。根本原因是:(加载顺序) head标签里(link标签-css文件)-> body里的内容 -> src的script文件 ->页面中写入的js。这里就解释...
  • qq_31164127
  • qq_31164127
  • 2017-05-02 17:06:14
  • 354

页面加载顺序,loading巧妙解决

  • 2017年05月03日 16:37
  • 4.42MB
  • 下载
收藏助手
不良信息举报
您举报文章:页面加载顺序问题,影响视觉效果,使用loading解决。
举报原因:
原因补充:

(最多只允许输入30个字)