您的位置：首页 > 其它

【响应式Web设计实践 #BOOK#】

2013-12-22 04:53 197 查看

<!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'

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航