页面加载顺序问题,影响视觉效果,使用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

版权声明:本文为博主原创文章,未经博主允许不得转载。

JS实现页面加载完毕之前loading提示效果

一、JS代码: //获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, ...
  • haibo0668
  • haibo0668
  • 2016年10月28日 12:04
  • 20829

高效抽取loading,再多的加载页面也不怕

当今的app基本上有两个操作,一个是加载数据 ,一个就是把数据显示到页面上。但如果页面特别的多。就每个页面都要加载数据,就要写 loading 页面。我之前就是用dialog写,抽取出来一个类。哪里需...
  • dianyueneo
  • dianyueneo
  • 2015年07月20日 15:44
  • 7303

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

几种常见的载入中、loading页面效果的实现方法总结 网页加载过程中提示“载入中…”,特别是使用动画效果,可以一个“等待”的温馨提示,用户体验很不错。 先说最简单的第一种,原理就是,在网页载...
  • zhihui1017
  • zhihui1017
  • 2016年02月01日 11:31
  • 24007

js获取页面加载过程做一个简单的loading

前几天写了一个简单的,还是觉得改善一下 document.onreadystatechange = loadingChange;//当页面加载状态改变的时候执行这个方法. func...
  • u011108439
  • u011108439
  • 2016年03月29日 18:25
  • 3282

网页loading(加载)效果的实现

说到页面loading效果,现在各种PC端和移动端的应用使用loading都十分的广泛,这是因为页面的加载时需要时间的,如果页面加载很快,loading的作用可能还不是特别能够体现,但是如果当页面加载...
  • qq_33562825
  • qq_33562825
  • 2017年03月05日 19:47
  • 2610

Unity中loading页加载的实现

首先创建一个Global.cs 使用单例用于存储场景的名字,便于后续脚本的调用,此脚本不必挂载在游戏物体上。using UnityEngine; using System.Collections; ...
  • LONERrain
  • LONERrain
  • 2017年02月22日 20:32
  • 3280

JS实现页面加载完毕之前loading提示效果

做成js调用: base-loading.js代码 [html] view plain copy   /...
  • u012028371
  • u012028371
  • 2017年02月16日 20:11
  • 3838

.net MVC框架下利用CSS+js实现loading效果

继续上一节的话题,http://blog.csdn.net/luanzheng_365/article/details/70348382 动态刷新过程往往需要较多的时间,这期间需要做一个loading...
  • luanzheng_365
  • luanzheng_365
  • 2017年04月22日 16:20
  • 377

Android网络加载通用LoadingView

我们在进行网络加载的时候,有时候需要一个能覆盖界面的loading界面,比如第一次进应用,加载数据的时候,需要这么个loading页面,体验比较友好,再比如第一次进来,数据加载失败了,或者无网络了,需...
  • Picasso_L
  • Picasso_L
  • 2016年07月20日 17:31
  • 5084

javaweb项目CSS和JS引入导致缓存问题的部分解决方式.

经常开发网站的时候.由于管理不好,大部分人开始的时候都是引入css和js都不是十分注意. 本人也吃过亏,所以这次记录下来.也百度了很多找到了一些办法吧。一:css引入 加个时间戳. 每次打开页面css...
  • u013100581
  • u013100581
  • 2016年10月31日 15:06
  • 3838
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:页面加载顺序问题,影响视觉效果,使用loading解决。
举报原因:
原因补充:

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