Bootstrap优化站点资源、响应式图片、传送带使用详解3


Posted in Javascript onOctober 14, 2016

优化Bootstrap站点资源、完成Bootstrap响应式图片、让传送带支持手势,具体内容如下

A.优化站点资源

速度很重要。用户很关心。我们的站点必须加载够快,否则用户就会走人。SEO 也很重要。我们的站点必须加载够快,否者搜索排名就会下降。

明白了这样,我们就来清点一下 【Bootstrap】2.作品展示站点 中的资源。特别的,来看一看我们能控制的、影响页面速度的重要因素 —— 文件大小,包括图片、CSS和 JavaScript 文件。只要简单几步,我们就可以给这些文件“瘦身”,缩短加载时间。

A.1 优化图片

这些图片都通过 Photoshop 的 “保存为 Web 格式” 进行了一定程度的优化。但是,所有图片加载一块,也有719 KB。

Bootstrap优化站点资源、响应式图片、传送带使用详解3

这些作品很重要。(比较是个人作品站点。)可是,这些个体也确实大了一些。通过更有效的压缩,能减少文件大小。

要减少文件大小,同时又不会损害图片质量,可以使用一些工具,比如 Yahoo! 的 Smushit:http://www.smushit.com/(国内貌似不能访问)

对于 Mac 用户,免费的 ImageOptim 应用(https://imageoptim.com/mac)也能达到类似的目的。笔者使用该应用,把整体大小减少了50.2 KB 。

Bootstrap优化站点资源、响应式图片、传送带使用详解3

A.2 优化CSS

先看看为优化的样式表 main.css 的文件多大:

Bootstrap优化站点资源、响应式图片、传送带使用详解3

134 KB! 任何负责的开发者都不会让这么一个小网站带那么大的样式表。

好消息时,我们可以轻易把这个大小减半。利用 Bootstrap 的模块化 LESS 方案,可以立即缩小 CSS,步骤如下:

(1) 开发 less/__main.less;

(2) 注释掉不需要的 LESS 文件,比如这些:

//@import "bootstrap/glyphicons.less";
...
//@import "bootstrap/dropdowns.less";
//@import "bootstrap/button-groups.less";
//@import "bootstrap/input-groups.less";
...
//@import "bootstrap/breadcrumbs.less";
//@import "bootstrap/pagination.less";
//@import "bootstrap/pager.less";
//@import "bootstrap/labels.less";
//@import "bootstrap/badges.less";
//@import "bootstrap/jumbotron.less";
//@import "bootstrap/thumbnails.less";
//@import "bootstrap/alerts.less";
//@import "bootstrap/progress-bars.less";
//@import "bootstrap/media.less";
//@import "bootstrap/list-group.less";
//@import "bootstrap/panels.less";
//@import "bootstrap/responsive-embed.less";
//@import "bootstrap/wells.less";
//@import "bootstrap/close.less";
...
//@import "bootstrap/modals.less";
//@import "bootstrap/tooltip.less";
//@import "bootstrap/popovers.less";

(3) 当然得小心一点,否则一不留神就可能注释掉必要的文件。因为时候要花点时间重编译,全面测试一下。

(4) 注释掉不必要的文件后,选择编译器中的最小化(或者压缩输出)选项,最后重编译以便,保存问 css/main.css 。

(5) 再看看文件有多大。我这里的结果是 91KB。减少了43KB。

Bootstrap优化站点资源、响应式图片、传送带使用详解3

当然,你还可以优化得再细一些。比如,可以打开每个保留的LESS文件,再把其中没有必要的代码一行一行注释掉。

最后,我们来看看如何优化 JavaScript。

A.3 优化JavaScript

为优化JavaScript,我们要把 plugins.js 文件中的 Bootstrap 插件,替换成只剩我们用到的几个。然后再重新压缩文件。

(1) 打开 js/plugins.js

(2) 删除属于 bootstrap.min.js 的代码块

(3) 打开 js/bootstrap 文件夹,这里保存着 Bootstrap 插件的独立文件。组个打开系列文件,将他们的代码复制到 plugins.js 文件里,这三个插件是我网站中用到的:

□ carousel.js

□ collapse.js

□ transition.js

(4) 保存"瘦身"版的 plugins.js 文件,刷新浏览器试试

□ 确保响应式导航条在窄视口中能够折叠,并且单击按钮可以展开下拉列表;

□ 确保传送带一切如常。

如果都没有问题,说明已经宝航了所需要的 JavaScript 。

(5) 下一步可以缩小(minify)或"丑化"(uglify) plugins.js 文件了。建议使用下列在线工具。

□ Uglify JS:https://marijnhaverbeke.nl/uglifyjs

□ YUI Compressor:http://refresh-sf.com/yui/

□ 谷歌的 Closure Compiler: http://closure-compiler.appspot.com

打开这些在线工具,把 plugins.js 的代码复制过去,运行,再把得到的代码复制回 plugins.js。

这里选择的是 Uglify JS。

(6) 保存后压缩后的文件。

(7) 比较大小。

为了对比方便,这里为所有文件保存了备份:

Bootstrap优化站点资源、响应式图片、传送带使用详解3

□ plugins-all 包含完整的 bootstrap.min.js 代码;

□ plugins-uncompressed.js 包含我们需要的三个插件,未压缩;

□ plugins.js 是最终文件,缩小并去掉空格串联的版本。

最终文件只相当于原来的四分之一。

A.4 优化结果

总体来看,我们的优化工作取得了成效。把图片、CSS 和 JavaScript 都算一块,原来的大小是885 KB。

优化之后,变成了 769 KB,节省了116 KB,超过了 10%,

事实上,我们还能够继续优化,尤其是针对小屏设备,方法就是实现响应式图片。

B.实现响应式图片

如果我们秉承移动友好的开发宗旨,那么就需要选择一种响应式图片技术。

B.1 分析作品传送带

【Bootstrap】2.作品展示站点的个人作品网站中,传送带中图片是为全宽布局设计的,宽度时 1600px,大小为 135~189 KB。把这么大的图片发送到手机和非视网膜屏的平板中就过分了。在移动优先响应式设计的时代,这样做又是不负责任的。

而且,如果再看一看小屏幕中的显示效果,你可能会发现传送带中的图片应该更高点、窄点才好,因为窄屏幕垂直方向向上空间相对富余一些。

在手机屏幕那么宽的视口中,我们的图片,为大屏幕准备的图片,是可以显示,但如果能够更多利用垂直空间,效果会更好。这一点通过下面的屏幕截图可以看出来:

Bootstrap优化站点资源、响应式图片、传送带使用详解3

好的响应式图片技术,应该能让我们为小屏幕提供适当的图片,满足小文件、快速加载,以及改进设计的要求。

B.2 选择方案

本书作者推荐的是 Picturefill 技术。Picturefill 方案较好地平衡了性能和设计问题,而且方案也相当简单。

PS:相关文章:https://www.smashingmagazine.com/2013/07/choosing-a-responsive-image-solution/(这篇文章比较早了,建议还是直接看官方文档)

Picturefill 实现想饮食图片只需简单几步:

(1) 准备好针对目标视口的理想图片;

(2)下载并包含 Picturefill 的 JavaScript 文件;

(3) 用 Picturefill 的标记模式来引入图片。

一如往常,实际开发过程还有两个步骤:

□ 测试;

□ 按需调整。

下面我们就一步一步来做。

B.2.1 准备响应式图片

此书的源码中已经准备好了特殊尺寸和经过优化的图片,方便起见,我们把它们直接拷贝到我们的 img文件夹下:

Bootstrap优化站点资源、响应式图片、传送带使用详解3

打开这个图片,会发现它们更窄一些,长宽比更小。这是为了像下面这样在窄视口中更多利用垂直空间:

Bootstrap优化站点资源、响应式图片、传送带使用详解3

当然,图片也小一些,900px × 600px,保证在视网膜屏中也能有足够的像素,但比起初的1600px × 800px 就小多了.。这些小图片平均都比原来的大图片小50%以上。

Bootstrap优化站点资源、响应式图片、传送带使用详解3

图片准备好以后,接下来该 JavaScript 上场了。

B.2.2 使用 JavaScript

Picturefill 的文件及文档位于 GitHub,地址是:https://github.com/scottjehl/picturefill

大家可以花点时间看看文档。我们一会就要用到文档中推荐的元素。我们要先下载该文件,解压缩后,找到 picturefill.min.js,然后把它复制到 plugins.js 文件中。

接下来,按照 Picturefill的约定准备标记。

B.2.3 修改标记结构

在 html 文档中,修改每张图片的标记,使用 Picturefill 的 picture 元素的模式。这里的标记默认采用小图片,但视口在 640px 及以上的浏览器和IE8例外。

一下就是修改后第一张图片的标记。

<picture>
 <source srcset="img/okwu.jpg" media="(min-width:640px)" />
 <img srcset="img/okwu-sm.jpg" alt="OKWU.edu Homepage" />
</picture>

然后依次修改剩余的图片标记就可以了。

B.2.4 测试与调整

保存并测试,你会发现这一次传送带的图片不会调整适应屏幕宽度了。这是因为 Picturefill的标记没有使用 Bootstrap 传送带样式中的选择符。

我们的修改 _carousel.less 文件中相应的选择符,好让图片撑满可用空间,步骤如下:

(1) 打开 _carousel.less

(2) 搜索到注释// Account for jankitude on images ,把 > img 和 >a >img 子选择符,替换成简单点的后代 img 选择符,以便选中现在在Picturefill 标记中嵌套较深的图片:

// Account for jankitude on images
//> img,
//> a > img,
img { //added to apply to Picturefill responsive image solution
 &:extend(.img-responsive);
 line-height: 1;
 min-width:100%; //added
 height:auto; //added
 ...

问题就这样解决了。

B.3 最终的结果

在视口小于640ps时,传送带应该使用较小但相对较高的图片。

Bootstrap优化站点资源、响应式图片、传送带使用详解3

以此为起点,大家可以参考 Picturefill 的文档,根据需要再调整和适配自己需要的版本。

C.让传送带支持手势

在触摸屏设备中,支持手势轻扫来切换传送带图片是一个非常实用的功能。

C1.有什么选择

如果只是要让传送带之处轻扫手势,只要一个 JavaScript 插件和几行代码就可以了。Justin Lazanowski 专门为实现 Bootstrap 3 传送带的手势交互写过一篇文章,提到三种选择。文章地址为:http://lazcreative.com/blog/adding-swipe-support-to-bootstrap-carousel-3-0/

这里将使用 jQuery插件 TouchSwipe,其GitHub 地址为:https://github.com/mattbryson/TouchSwipe-Jquery-Plugin

使用这个插件,可以通过下列步骤让传送带支持轻扫手势:

(1) 把 TouchSwipe 插件包含到我们的插件文件中;

(2) 在 main.js 文件中写几行调用代码。

C.2 取得并包含 TouchSwipe 插件

下载后解压缩,找到jquery.touchSwipe.min.js 文件,把其中的代码复制到 plugins.js 中。这样,插件就位了。接下来需要调用它。

C.3 调用 TouchSwipe

需要写一行代码,命令 TouchSwipe 监听传送带上的轻扫事件,然后将其转换成 Bootstrap 的方法调用:.carousel('prev') 和 .carousel('next')。关于这些方法,可以参考 Bootstrap 的文档:http://getbootstrap.com/javascript/

接下来的事很简单,只需下列几步:

(1) 打开项目中的 main.js 文件。

(2) 在其中添加如下代码:

//Enable swiping...
 $(".carousel-inner").swipe({
 swipe: function (event, direction, distance, duration, fingerCount, fingerData) {
 if (direction == "right") {//向右划
 //Cycles to the next item.
 $(this).parent().carousel("prev");
 } else if (direction == "left") {//向左划
 //Cycles to the previous item.
 $(this).parent().carousel("next");
 }
 }
 });

(3) 保存后刷新,就可以通过左、右轻扫来切换图片了。效果图如下:

Bootstrap优化站点资源、响应式图片、传送带使用详解3

显示效果地址:http://ycdoit.com/show/bootstrap-code-02.html

《Bootstrap 实战》的PDF文档和源码链接:http://xiazai.3water.com/201610/yuanma/BootstrapSite(3water.com).rar

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery AJAX提交中文乱码的解决方案
Jul 02 Javascript
js 获取(接收)地址栏参数值的方法
Apr 01 Javascript
jquery实现输入框动态增减的实例代码
Jul 14 Javascript
javascript制作坦克大战全纪录(2)
Nov 27 Javascript
WEB前端设计师常用工具集锦
Dec 09 Javascript
老生常谈javascript变量的命名规范和注释
Sep 29 Javascript
微信小程序 弹窗自定义实例代码
Mar 08 Javascript
Javascript中的getter和setter初识
Aug 17 Javascript
基于vue-ssr的静态网站生成器VuePress 初体验
Apr 17 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
May 01 Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
Jan 31 Javascript
vue3 源码解读之 time slicing的使用方法
Oct 31 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
Oct 14 #Javascript
D3.js实现文本的换行详解
Oct 14 #Javascript
Bootstrap企业网站实战项目4
Oct 14 #Javascript
Bootstrap在线电子商务网站实战项目5
Oct 14 #Javascript
纯JS打造网页中checkbox和radio的美化效果
Oct 13 #Javascript
angularjs 中$apply,$digest,$watch详解
Oct 13 #Javascript
jQuery鼠标事件总结
Oct 13 #Javascript
You might like
Function eregi is deprecated (解决方法)
2013/06/21 PHP
PHP数组排序之sort、asort与ksort用法实例
2014/09/08 PHP
超详细的php用户注册页面填写信息完整实例(附源码)
2015/11/17 PHP
Zend Framework+smarty用法实例详解
2016/03/19 PHP
PHP线程的内存回收问题
2016/07/08 PHP
实例分析PHP中PHPMailer发邮件
2017/12/13 PHP
php微信分享到朋友圈、QQ、朋友、微博
2019/02/18 PHP
Javascript 继承机制的实现
2009/08/12 Javascript
JS中Iframe之间传值及子页面与父页面应用
2013/03/11 Javascript
原始的js代码和jquery对比体会
2013/09/10 Javascript
学习Angularjs分页指令
2016/07/01 Javascript
AngularJS 基础ng-class-even指令用法
2016/08/01 Javascript
Web制作验证码功能实例代码
2017/06/19 Javascript
Angular模板表单校验方法详解
2017/08/11 Javascript
bootstrap select下拉搜索插件使用方法详解
2017/11/23 Javascript
nodejs实现套接字服务功能详解
2018/06/21 NodeJs
vue 1.0 结合animate.css定义动画效果
2018/07/11 Javascript
vue 基于element-ui 分页组件封装的实例代码
2018/12/10 Javascript
微信小程序实现定位及到指定位置导航的示例代码
2019/08/20 Javascript
JavaScript实现好看的跟随彩色气泡效果
2020/02/06 Javascript
javascript 原型与原型链的理解及应用实例分析
2020/02/10 Javascript
Python转换HTML到Text纯文本的方法
2015/01/15 Python
python实现自动登录
2018/09/17 Python
Python类和对象的定义与实际应用案例分析
2018/12/27 Python
学生信息管理系统Python面向对象版
2019/01/30 Python
python 实现保存最新的三份文件,其余的都删掉
2019/12/22 Python
python实现猜单词游戏
2020/05/22 Python
HTML5计时器小例子
2013/10/15 HTML / CSS
戴尔英国翻新电脑和电子产品:Dell UK Refurbished Computers
2019/07/30 全球购物
公证委托书标准格式
2014/09/11 职场文书
婚庆公司计划书
2014/09/15 职场文书
2015小学五年级班主任工作总结
2015/05/21 职场文书
pytorch 一行代码查看网络参数总量的实现
2021/05/12 Python
教你怎么用python爬取爱奇艺热门电影
2021/05/20 Python
面试中老生常谈的MySQL问答集锦夯实基础
2022/03/13 MySQL
AJAX引擎原理以及XmlHttpRequest对象的axios、fetch区别详解
2022/04/09 Javascript