我尝试了Bootstrap,但我对一件事感到惊讶,这是因为Glyphicons似乎加载或显示起来确实很慢。

我觉得即使轮播也能更快显示出来。
但是,在其他网站上似乎没有那么慢。

因此,我想我肯定做错了什么,但是我看不到用于在线显示字形图标的代码有很多区别,是否有任何办法可以解决?

但是到目前为止,由于我试图在本地运行所有内容,因此应该像灯一样快,不是吗?字形图标需要两秒钟,而其余的则是瞬时显示。

有什么方法可以更好地衡量某些东西可以在屏幕上显示的速度(而不是仅仅使用最终用户的感觉),请告诉我。

刚开始进行Web前端开发,请放心。

以下是我仅用于显示一个glyphicon-home的代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->

        <title>My Page...</title>

        <!-- Bootstrap core CSS -->
        <!-- Latest compiled and minified CSS -->
        <link href="boostrap - 3.3.5/css/bootstrap.min.css" rel="stylesheet">

        <!-- Favicons... -->
        <!-- For IE 9 and below. ICO should be 32x32 pixels in size -->
        <!--[if IE]><link rel="shortcut icon" href="favicon.ico"><![endif]-->

        <!-- Touch Icons - iOS and Android 2.1+ 180x180 pixels in size. -->
        <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png" sizes="180x180">

        <!-- Firefox, Chrome, Safari, IE 11+ and Opera. 196x196 pixels in size. -->
        <link rel="icon" href="faviconOthers.ico" sizes="196x196">

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if IE 9]>
            <script src="html5shiv - 3.7.2/html5shiv.min.js"></script>
            <script src="respond - 1.4.2/respond.min.js"></script>
        <![endif]-->

        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script type="text/javascript" src="jquery - 1.11.3/jquery.min.js" ></script>

        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script type="text/javascript" src="boostrap - 3.3.5/js/bootstrap.min.js" ></script>
    </head>

    <body>
         <i class="glyphicon glyphicon-home"></i>
    </body>

</html>

最佳答案

我发现了问题所在,最底线位于bootstrap.min.css中。

原因是前一阵子我使用了在线引导程序定制器,原因是当时我还没有安装任何CSS预处理器。足以改变几种颜色。

但是,我不知道定制程序添加了一些链接,这些链接关于从何处获取某些字体,我想避免这种链接,因为我在中国,而且某些网站的访问速度确实很慢。

例如。

@font-face{font-family:'Glyphicons Halflings';
src:url(http://bootstrap-live-customizer.com/bootstrap-3.3.5/fonts/glyphicons-halflings-regular.eot);

关于javascript - Bootstrap:使用字形图标加载缓慢,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/32535694/

10-15 05:58