【響應式Web設計實踐 #BOOK#】

時間 2019-12-18

標籤響應 web 設計實踐 book 欄目 HTML 简体版

原文原文鏈接

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

在媒介查詢中聲明背景圖片。這樣只有那些須要用到背景圖片的纔會發送請求加載它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'