JavaScript教程:详细解析网页图片预览效果(4)

【显示预览】

程序初始化时就会根据mode来设置_show预览显示程序：

this._show = opt.mode !== "filter" ? this._simpleShow : this._filterShow;

除了filter模式，都是使用_simpleShow显示程序来显示预览图片的。
里面会先调用_simplePreload方法设置一般预载图片对象：

var preload = this._preload = new Image(), oThis = this;
preload.onload = function(){ oThis._imgShow( oThis._data, this.width, this.height ); };
preload.onerror = function(){ oThis._error(); };

预载图片对象保存在_preload属性中，主要用来判断图像能否加载成功并获取图片原始尺寸。
要实现这些功能只要用Image对象就足够了。
在onload中执行_imgShow显示预览，在onerror中进行出错处理。
ps：ff、chrome和safari的图片对象还有naturalHeight和naturalWidth属性可以获取图片的原始尺寸。

然后设置_preload的src预载图片，如果成功预载就会执行_imgShow显示预览。
要注意src的设置要在onload/onerror的设置之后，否则设置之前就加载完成的话就触发不了事件了。

_imgShow需要三个参数，包括要预览图片的src值，图片原始宽度和图片原始高度。
在_imgShow里面首先设置预览图片的尺寸：

var img = this.img, style = img.style,
    ratio = Math.max( 0, this.ratio ) || Math.min( 1,
            Math.max( 0, this.maxWidth ) / width  || 1,
            Math.max( 0, this.maxHeight ) / height || 1
        );
   
style.width = Math.round( width * ratio ) + "px";
style.height = Math.round( height * ratio ) + "px";

这里的关键是获取ratio比例值，如果自定义的ratio大于0就直接使用自定义的比例，否则就根据参数自动计算。
自动计算首先要确保maxWidth最大宽度和maxHeight最大高度大于等于0。
然后分别跟原始宽高做“/”运算得到比例，如果比例为0表示不限制，那么比例就自动改为1。
最后取比较小的比例来计算，程序设定了比例最大值为1，这样就不会自动放大图片了。
当然比例的计算可以根据需要自行修改。
ps：style的优先级比属性(width/height)高，所以要用style设置。

最后设置img的src就实现预览了。