这段imgSizer的JS代码如何使用的,请指点?

var imgSizer = {
Config : {
imgCache : []
,spacer : "spacer.gif"
}

,collate : function(aScope) {
var isOldIE = (document.all && !window.opera && !window.XDomainRequest) ? 1 : 0;
if (isOldIE && document.getElementsByTagName) {
var c = imgSizer;
var imgCache = c.Config.imgCache;

var images = (aScope && aScope.length) ? aScope : document.getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
images[i].origWidth = images[i].offsetWidth;
images[i].origHeight = images[i].offsetHeight;

imgCache.push(images[i]);
c.ieAlpha(images[i]);
images[i].style.width = "100%";
}

if (imgCache.length) {
c.resize(function() {
for (var i = 0; i < imgCache.length; i++) {
var ratio = (imgCache[i].offsetWidth / imgCache[i].origWidth);
imgCache[i].style.height = (imgCache[i].origHeight * ratio) + "px";
}
});
}
}
}
,ieAlpha : function(img) {
var c = imgSizer;
if (img.oldSrc) {
img.src = img.oldSrc;
}
var src = img.src;
img.style.width = img.offsetWidth + "px";
img.style.height = img.offsetHeight + "px";
img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='scale')"
img.oldSrc = src;
img.src = c.Config.spacer;
}
,resize : function(func) {
var oldonresize = window.onresize;
if (typeof window.onresize != 'function') {
window.onresize = func;
} else {
window.onresize = function() {
if (oldonresize) {
oldonresize();
}
func();
}
}
}
}

这段代码是为了让IE5(IE的F12开发者,仿真,文档模式中选择)适应窗口缩小,而图片不会缩小导致出现横向滚动条用的。目前IE5使用者应该是少之又少,并且这种模式图像缩放并不理想,所以不用理解它也罢。只是看了《Bootstrap实战从入门到精通》的书后,兴趣盘它一下。

你可以先准备一张屏幕最大宽度80%左右的图片(如:b.png),先构建这样一个HTML:

<!DOCTYPE html>
<html>
<head>
<script>上面的代码放这里</script>
</head>
<body onload="imgSizer.collate();">
<img src="b.png" style="max-width:100%" />
</body>
</html>

然后你用IE打开,如果用得来IE开发者工具,则调为仿真IE5,如果用不来,直接把脚本“var isOldIE = (document.all && !window.opera && !window.XDomainRequest) ? 1 : 0;”这一句直接改为“var isOldIE =1;”(看旧IE情况下)或改为“var isOldIE =0;”(看新IE情况下)

测试结果如下:1、大部分浏览器已支持在IMG元素中使用 style="max-width:100%",不使用这段imgSizer情况下(body的onload去掉),只有IE5出现滚动条。

仿真IE5出现滚动条


其他浏览器正常缩放


其他浏览器正常缩放

2、为了让IE5也可以缩放,body的onload加上"imgSizer.collate();",var isOldIE语句有问题,也手动设为1。IE5展示如下:

IE5虽然缩小,但宽高不是成比例缩小。

IE5虽然缩小,但宽高不是成比例缩小。

总结:为了最后一点效果,这么折腾,我想还是算了吧。

温馨提示:答案为网友推荐,仅供参考
第1个回答  2020-07-21
imgSizer.collate(img)。
这是一段不失真缩放图片的js代码,主要为了兼容ie浏览器。
代码以对象的形式定义了3个方法:collate、ieAlpha、resize。其中collate作为主方法调用ieAlpha,resize。
imgSizer.collate(img)中img参数为需要缩放的图片列表(数组),没有传参数则处理页面中所有的图片。本回答被提问者和网友采纳