JPG图片优化测试_JS脚本

前端代码开发完成后，编辑会拿去填内容，其中图片元素是内容组成的重要一部分。
通常前端UI合图使用GIF或PNG格式，内容图片则与JPG文件为主。
前端优化中重要一项是控制文件SIZE，要求手写代码、简洁高效、去冗余、装饰图都埋在CSS里。
挂一个jQuery(jquery-1.5.2.min.js)，大小在85KB以内。有些公司更吝啬字节，封装小量的基类使脚本相对更轻巧。
但一张没有优化过的内容图片SIZE超过100KB是常有的事，对用户体验及服务流量带来不小的损失。

用一个脚本来提醒编辑那些内容图片应该注意优化，这正是本文的目地。

环境要求：
由于使用了fileSize属性，脚本运行环境为IE浏览器。
IE6、7（不是IETester），可把脚本抽脂压榨为一行后在WEB页面加载完成后，于地址栏输入执行即可。
IE8下脚本在地址栏下输入执行已被禁止，在WEB页面加载完成后可按F12呼出‘开发人员工具’在脚本控制台中粘贴脚本运行即可。

运行脚本后，脚本会排查JPG图片，如有超标嫌疑会加5像素的黄色边框已示警告，鼠标悬浮此图上已TITLE的形式报告此图的当前大小SIZE和优化后理想的大小SIZE数据。

/**
 * @author rocdu
 * @desc JPG图片优化测试
 */
;(function(){
    var jpgTest = function(_data){
        this.data = _data;
        this.init();		
	};
    jpgTest.prototype = {
        /**
         * 测试目标
         */
        aim: function(){
            var img = document.getElementsByTagName('img'),
                imgLen = img.length;
            for(var i = 0; i < imgLen; i++){
                if(img[i].fileSize < 
                   (this.data.excluded * 1024) ||    // 图片不在优化范围内
                   !img[i].src.match(/\.jpe?g$/i) || // 图片不是JPG文件
                   img[i].offsetWidth == 0           // 图片没有width属性值
                   ){continue;};
                this.disposal(img[i], Math.floor(img[i].fileSize * .001024));
           };
        },
        /**
         * 测试结果处理
         * @param {obj} _img
         * @param {int} _imgFact
         */
        disposal: function(_img, _imgFact){
            var imgW = _img.offsetWidth,
                imgH = _img.offsetHeight,
                imgIdeal = Math.floor(imgW * imgH * this.data.optimization * .001024); // 计算期望值
            if(_imgFact > imgIdeal){ // 展示测试结果
                _img.style.border = '5px yellow solid';
                _img.title = '[实际大小:(' + _imgFact + 'KB)];[期望大小:(' + imgIdeal + 'KB)]';
            };
        },
        /**
         * 隐藏修复
         */
        hiddenFix: function(){
            var that = this;
            document.onmousemove = function(){
                that.aim();
            };
        },
        /**
         * 初始化
         */
        init: function(){
            this.aim();
            this.hiddenFix();
        }
    };
	
    var myJpgTest = new jpgTest({
        optimization: .45, // 优化比(通常比值在45%或60%)
        excluded: 3        // 小于此值的,即排除范围(以KB为单位)
    })
})();