Javascript解决图片缩放问题
时间：2022-02-26
阅读：0
采用页面加载时触发。
function resizeImage(img,width){
var image=new Image();
image.src=img.src;
var temp = image.width;
img.width = temp = (temp>width)?width:temp;
img.style.display = "inline";
}
function doResize(){
if($.browser.version==6&&$.browser.msie) $("img").each(function(){resizeImage(this,100)});
}
window.onload = doResize;
这段代码利用resizeImage函数判断，并且修改img.width属性，原理比较简单，在这段代码前面我还加了一个对IE6浏览器的判定，除了它以外，我还是让CSS搞定图片的尺寸。我在代码中没有定义图片的高和宽的数值，这样在缩放时，只要修改其中的一个数值，让另一个数值去自适应，而不是让js去执行等比缩放，这也算是一点点优化吧。
我在代码中引用了Jquery（因为习惯了），你没必要这样做，我之所以这么写，是在DOM元素返回以后可以统一进行函数处理。考虑到客户经常会使用外链的图片，这时，网页的显示速度就受到图片源的影响，所以在页面加载时我先利用CSS把需要显示的图片隐藏，直到图片缩放后再利用js的方法显示图片，因此，又对IE6做了个hack:
img{
display:inline !important;
display:none;
max-width:180px;
}
开通特权，即可免费下载全站所有千余TB网络资源，点击 >>> 资源目录 查看所有资源，覆盖音乐、影视、有声书、电子书、漫画、动漫、课程等，不限时间次数，永久免费，点击 >>> 特权详情 了解更多！
标签：
JavaScript
图片缩放
鄂公网安备 42010402000675号