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

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

相关文章推荐

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

  • 2017年05月03日 16:37
  • 4.42MB
  • 下载

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

做成js调用: base-loading.js代码 [html] view plain copy   /...

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

一、JS代码: //获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, ...

页面加载过程中的等待查询loading效果

实现查询等待:正在查询中,请稍后... html代码: 正在查询,请稍等... .query_hint{ border:5px solid #939393; width:...

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

前几天写了一个简单的,还是觉得改善一下 document.onreadystatechange = loadingChange;//当页面加载状态改变的时候执行这个方法. func...

解决浏览器页面加载问题

  • 2013年05月23日 15:11
  • 2KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:页面加载顺序问题,影响视觉效果,使用loading解决。
举报原因:
原因补充:

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