<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

</head>

<body>

    <ul class="slats">

        <li data-src="http://pic002.cnblogs.com/images/2012/382256/2012080118323766.gif" class="group"></li>

        <li data-src="http://pic002.cnblogs.com/images/2012/382256/2012080118323766.gif" class="group"></li>

    </ul>

    <script>

        if (document.getElementsByClassName && typeof console !== 'undefined') { // ie8支持console

            console.log(document.getElementsByClassName('group'))

        }

        if (document.querySelectorAll && typeof console !== 'undefined') {

            console.log(document.querySelectorAll('.group'))

        }

        if (document.querySelector && typeof console !== 'undefined') {

            console.log(document.querySelector('.group'))

        }

        var Utils = {

            q: function(query) {

                if (document.querySelectorAll) { // ie8支持

                    var res = document.querySelectorAll(query)

                } else {

                    var d = document

                    try {

                        var a = document.styleSheets[0] // ie8获取不到style报错

                    } catch(e) {

                        var a = d.createStyleSheet()

                    }

                    //var a = d.styleSheets[0] || d.createStyleSheet()

                    a.addRule(query, 'f:b')

                    for (var l = d.all, b = 0, c = [], f = l.length; b < f; b++) {

                        l[b].currentStyle.f && c.push(l[b])

                    }

                    a.removeRule(0)

                    var res = c

                }

                return res

            }

        }

        var lazy = Utils.q('[data-src]')

        for (var i = 0; i < lazy.length; i++) {

            var source = lazy[i].getAttribute('data-src')

            var img = new Image()

            img.src = source

            lazy[i].insertBefore(img, lazy[i].firstChild)

        }

    </script>

</body>

</html>

在媒介查询中声明背景图片。这样只有那些需要用到背景图片的才会发送请求加载它

目前，基于Webkit的浏览器在下载好Web字体之前，是不会显示使用该Web字体格式化的文本的。这就意味着如果用户使用的是一个连接速度很慢的设备时，需要花费一段时间来显示。所以我们可以将@font-face的声明也放到媒体查询中去。这样做可以确保那些屏幕宽度低于断点的设备不会尝试下载字体

与有线连接相比，移动网络正遭受着显著增加的延迟和显著减少的带宽。因此，在考虑站点在移动网络上的性能的时候，通过采用内联的样式表和脚本来减少请求数目会更有意义

var testImg = document.createElement('img')

testImg.onload = function() {

    var endTime = (new Date()).getTime()

    var duration = (endTime - startTime) / 1000

    console.log(duration)

}

var startTime = (new Date()).getTime()

testImg.src = 'http://pic002.cnblogs.com/images/2012/382256/2012080118323766.gif'

【响应式Web设计实践 #BOOK#】的更多相关文章

  1. 《响应式Web设计实践》学习笔记

    原书: 响应式Web设计实践 目录: 第2章 流动布局 1. 布局选项 2. 字体大小 3. 网格布局 4. 混合固定宽度和流动宽度 第3章 媒介查询 1. 视口 2. 媒介查询结构 3. 内嵌样式与 ...

  2. [已读]响应式web设计实践

    薄的一本,彩印,书质量和内容都不错. 响应设计三要素:媒体查询.流动布局.自适应图片.

  3. 响应式Web设计(Responsive Web design)

    中文名 响应式Web设计 提出时间 2010年5月 英    文 Responsive Web design 解    释 一个网站能够兼容多个终端 目    的 解决移动互联网的浏览 优    点 ...

  4. 什么是响应式Web设计？怎样进行？

    http://beforweb.com/node/6/page/0/3 开始第一篇.老规矩,先无聊的谈论天气一类的话题.十一长假,天气也终于开始有些秋天的味道,坐在屋里甚至觉得需要热咖啡.话说两年前也 ...

  5. 响应式WEB设计的9项基本原则

    响 应式Web设计对于解决多类型屏幕问题来说是个不错方案,但从印刷的角度来看,其却存在着很多的困难.没有固定的页面尺寸.没有毫米或英寸,没有任何物理 限制,让人感到无从下手.随着建立网站可用的各种小工 ...

  6. 最佳的 14 个免费的响应式 Web 设计测试工具

    一旦你决定要搭建一个网站就应该已经制定了设计标准.你认为下一步该做什么呢?测试!我使用“测试”这个词来检测你网站对不同屏幕和浏览器尺寸的响应情况.测试在响应式网页设计的过程中是很重要的一步.如果你明白 ...

  7. <HTML5和CSS3响应式WEB设计指南>译者序

    "不是我不明白,这世界变化快."崔健的这首歌使用在互联网领域最合适不过.只短短数年的功夫,互联网的浪潮还没过去,移动互联网的时代已经来临.人们已经习惯将越来越多的时间花在各种移动设 ...

  8. 如何通过CSS3 实现响应式Web设计

    如何通过CSS3 实现响应式Web设计: 分为三个步骤:(1)允许网页宽度自动调整.首先在页面头部中,我们需要加入这样一行:<meta name="viewport" con ...

  9. [转]响应式WEB设计学习(1)—判断屏幕尺寸及百分比的使用

    原文地址:http://www.jb51.net/web/70360.html 现在移动设备越来越普及,用户使用智能手机.pad上网页越来越普遍.但是传统的fix型的页面在移动终端上无法很好的显示.因 ...

随机推荐

  1. 数字证书简介及Java编码实现

    1.数字证书简介 数字证书具备常规加密解密必要的信息,包含签名算法,可用于网络数据加密解密交互,标识网络用户(计算机)身份.数字证书为发布公钥提供了一种简便的途径,其数字证书则成为加密算法以及公钥的载 ...

  2. mvc5 + ef6 + autofac搭建项目（repository+uow）（一）

    直奔主题了,不那么啰嗦. 整体框架的参考来源是  O# 的框架,在此感谢锋哥一直以来的开源,让我们有的学 如下图: (图一) 一下分三个步骤说明,分别为 dbContext,repository,uo ...

  3. 用数据库管理SERV-U的用户时，如何修改密码及原理

    将serv-u设置成数据库管理用户的前提是先要建立数据源 如何用Serv-U连接ODBC|1.可以在 FTP所在服务器安装一个 SQL Server  数据库,也可以使用论坛自带的数据库.建议在 FT ...

  4. [Twisted] deferred

    Twisted提供一个优雅的实现(Deferred)来管理回调函数. Deferred Object 的结构 Deferred Object包含两个回调函数列表.一个用来保存成功的回调函数,另一个用来 ...

  5. ARM开发板系统移植-----u-boot的编译

    本文和另外两篇姊妹篇都是为了说明如何裁剪出适合在mini2440 开发板上运行的Linux系统,以记录自己的学习成果.其中本文先介绍了嵌入式系统的软件组成部分,然后介绍编译出适合在mini2440开发 ...

  6. Linux平台上搭建apache+tomcat负载均衡集群

    传统的Java Web项目是通过tomcat来运行和发布的.但在实际的企业应用环境中,采用单一的tomcat来维持项目的运行是不现实的.tomcat 处理能力低,效率低,承受并发小(1000左右).当 ...

  7. jquery技巧（持续更新。。）

    (1)集合处理功能         //为索引为0,1,2的元素分别设置不同的字体颜色         $('p').each(function(i){               this.styl ...

  8. Android Handler、Lopper消息驱动机制

    Android应用程序是通过消息来驱动的,系统为每一个应用程序维护一个消息队例(MesageQueue),应用程序的主线程不断地从这个消息队例中获取消息(Mesage),然后对这些消息进行处理(Han ...

  9. java相关各种页面跳转

    AK相信页面跳转在这个圈圈圆圆里是个地球人都能经常遇到的事,AK也在平时的工作学习中记录了一些,这里就做一个小小的总结,有任何的疑问和质疑都希望您能告诉我,不用担心后果,必定至少您还能理我,AK万分感 ...

  10. matlab操作之--读取指定文件夹下的“指定格式”文件

    %% 正负样本所在folder fext='*.png';%要读取的文件格式 positiveFolder='F:\课题\Crater detection\machingLearning\Positi ...