Bootstrap作品展示站点实战项目2(11)

□ 压缩图片花不了多少时间,但却能解决导致图片臃肿的最大问题。此章的图片都在 Photoshop 中使用了 “保存为 Web 格式”,但或许你还是能够再把它们压缩一些。

□ 此外,应该马上从 __main.less 中删除那些不需要的 Bootstrap 的 LESS 文件,然后最小化 main.css 。

□ 最后,还有对 plugins.js 进行“瘦身”,把 Bootstrap 原来大而全的 bootstrap.min.js 替换成只包含我们用到的 carousel.js、collapse.js 和 transition.js 的压缩版。然后再压缩最终的 plugins.js 。

做完以上三项优化,整个网站的体量大致将缩小一半。在速度就是生命的年代,既要考虑用户体验,又得考虑 SEO 排名,这么大幅度的优化可不得了。

此外,还有两个非常重要的可能性,或许i也应该考虑到。

第一,我们可以通过实现响应式来进一步优化传送带图片。那些图片太大了,特别是对小屏幕而言,实在没有必要那么大。相反,如果是像视网膜屏这样的高密度屏,为保证显示效果清晰锐利,我们也应该提供高分辨率的图片。

第二,我们知道,触摸屏设备的用户喜欢用手指来回扫屏切换传送带图片。可以利用出色的 Hammer.js 插件,只几步就为传送带添加扫屏交互支持。

最终,此例的显示效果如下:、

Bootstrap作品展示站点实战项目2

Bootstrap作品展示站点实战项目2

显示效果地址:(附《Bootstrap 实战》的PDF文档和源码链接:

本例源码下载:bootstrap-code-02.zip

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzdszd.html