我尝试了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/