22 10 月, 2014

<img src="small.jpg" data-fullsrc="large.jpg">

Date-fullsrc是html5中的一个定义文件的属性，宽度超过480px的屏幕，就会加载较大分辨率的图片（large.jpg），小屏幕分辨率的就会加载较小的图片（small.jpg）。

提升页面大小的效率，不仅仅是取决于使用精灵或是压缩代码，给定页面的请求数量在前端性能中也占有了很不小的重量。减少请求可以让你的网站加载更快，而其中一种减少页面请求的方法就是用Data URI代替图片的src属性：

<!-- 以前的写法 -->
<img src="http://images.cnblogs.com/logo.png" />

<!-- 使用data URI的写法 -->
<img src="data: image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAPAAA/+4ADkFkb2JlAGTAAAAAAf/bAIQABgQEBAUEBgUFBgkGBQYJCwgGBggLDAoKCwoKDBAMDAwMDAwQDA4PEA8ODBMTFBQTExwbGxscHx8fHx8fHx8fHwEHBwcNDA0YEBAYGhURFRofHx8fHx8fHx8fHx8fHx8fH ...." />

<-- 范例:  http://davidwalsh.name/demo/data-uri-php.php -->

当然页面大小会增加（如果你的服务器使用适当的gzip内容，这个增加会很小），但是你减少了潜在的请求，同时也在过程中减少了服务器请求的数量。现在大多数浏览器都支持Data URI，在CSS中的背景骨片也可以使用Data URI，因此这个策略现在已经可以在应用层级，广泛应用。

在开发中，我们经常遇到需要适配屏幕宽度的应用，比如图片自动缩放到适合尺寸。

<script>
    window.onload = function () {
        ReImgSize();
    }
</script>
<script type="text/javascript" defer>
    function ReImgSize() {
        var clientWidth = document.body.clientWidth;// window.innerWidth; //
        //首页主体背景
        var indexH = 747 * clientWidth / 640;   
		$(".default img").css("width", clientWidth * changeTwoDecimal(600 / 640));		
    }

    function getElementsByClassName(classname) {
        var children = document.all; 
        var elements = new Array(); 
        for (var i = 0; i < children.length; i++) {
            var child = children[i];
            var classNames = child.className.split(' ');
            for (var j = 0; j < classNames.length; j++) {
                if (classNames[j] == classname) {
                    elements.push(child);
                    break;
                }
            }
        }
        return elements;
    }

    function changeTwoDecimal(x) {
        var f_x = parseFloat(x);
        if (isNaN(f_x)) {
            alert('function:changeTwoDecimal->parameter error');
            return false;
        }
        var f_x = Math.round(x * 100) / 100;
        return f_x;
    }
</script>