图片预览所遇到的获取图片尺寸问题

这两天在做图片预览的效果，显示在文字内部的时候限制max-width，显示在遮幕上的时候希望显示原尺寸，这就遇到了问题，如果直接获取当前图片的width，获取的并不是原始的大小，而是设置的max-width，那么如何让解决呢？

需要先var img = new Image()，然后给这个img的src赋值，之后就可以获取到当前图片的原始大小了，然后在各浏览器测试都是成功的（chrome，Firefox，IE9，QQ，UC，Opera，360兼容模式），唯有360的极速模式不可以。

当时特别费解，360的极速模式是chrome内核啊，为什么在chrome可以，在极速模式却不可以。

百度后知道，有可能是网络延迟原因，需要优化代码，代码如下：

function ShowImg(oCtl){var img = new Image();img.src =$(oCtl).attr("src") ;var w = 0,h = 0;if(window.ActiveXObject) {//IE使用onreadystatechange监听readyState为 loaded或complete时再获取   img.onreadystatechange = function() {  if(img.readyState == "loaded" || img.readyState == "complete") {img.onreadystatechange = null;w = img.width;h = img.height;ShowPop(img.src , w, h); }  }} else {//其它浏览器可使用onload获取  img.onload = function() {img.onload  = null;w = img.width;h = img.height;ShowPop(img.src , w, h);   }}}

这样，图片的预览就解决了，可是遮罩层显示的时候如果页面很长，有滚动条，这时滚动鼠标，原页面还是可以滚动，尽管可以禁止鼠标滚动时造成的页面滚动，假若用键盘上的上下键也是会造成页面滚动。

解决思路就是，将页面的样式改为overflow:hidden。

这里还有一点可以优化的地方，就是设置为hidden的时候，滚动条不见了，页面宽度比原来多了一个滚动条的宽度，这样展示的时候页面会来回跳动。

优化思路就是加一个右边距，大部分浏览器是17px，这里偷个懒，就直接设置为17px,代码如下：

function ShowPop(src,w,h){var ml = -Number(w/2);var mt = -Number(h/2);$("#popDiv").css("display","block");//弹出层$("#popFade").css("display","block");//遮罩层$("#popImg").attr("src",src);//弹出层内图片$(".pop-content").css("width",w+"px").css("height",h+"px").css("margin-left",ml+"px").css("margin-top",mt+"px");//设置大小且居中显示document.documentElement.style.cssText = 'overflow:none;overflow:hidden;_overflow:hidden;height:100%;';document.body.style.cssText = 'overflow:hidden;overflow:none;_overflow:none;padding:0 17px 0 0;height:100%;';}function ClosePop(){$("#popDiv").css("display","none");$("#popFade").css("display","none");document.documentElement.style.cssText = 'overflow:auto;+overflow:auto;_overflow:auto;';document.body.style.cssText = 'overflow:auto;+overflow:auto;_overflow:auto;padding:0 0px 0 0;';}