主页 > 教程合集 > Html/css >

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;
 

Javascript解决图片缩放问题

这段代码利用resizeImage函数判断,并且修改img.width属性,原理比较简单,在这段代码前面我还加了一个对IE6浏览器的判定,除了它以外,我还是让CSS搞定图片的尺寸。我在代码中没有定义图片的高和宽的数值,这样在缩放时,只要修改其中的一个数值,让另一个数值去自适应,而不是让js去执行等比缩放,这也算是一点点优化吧。

我在代码中引用了Jquery(因为习惯了),你没必要这样做,我之所以这么写,是在DOM元素返回以后可以统一进行函数处理。考虑到客户经常会使用外链的图片,这时,网页的显示速度就受到图片源的影响,所以在页面加载时我先利用CSS把需要显示的图片隐藏,直到图片缩放后再利用js的方法显示图片,因此,又对IE6做了个hack:


img{
display:inline !important;
display:none;
max-width:180px;
}
 

开通特权,即可免费下载全站所有千余TB网络资源,点击 >>> 资源目录 查看所有资源,覆盖音乐、影视、有声书、电子书、漫画、动漫、课程等,不限时间次数,永久免费,点击 >>> 特权详情 了解更多!

余斗余斗
  • 版权声明:原创文章由发表在Html/css分类下,2022-02-26最后更新,转载注明出处。

相关推荐

返回顶部