js 图片加载时 按比例设置图片宽高_JS自动等比例缩放图片，判断网页与图片加载完成。...

通过document.readyState属性判断网页加载状态，该属性有一下几个值：

uninitialized：对象已产生，但没有任何文件被加载。

loading：加载程序进行中，但文件尚未开始解析。

loaded：部分的文件已经加载且进行解析，但对象模型尚未生效。

interactive：仅对已加载的部分文件有效，在此情况下，对象模型是有效但只读的。

complete：文件已完全加载，代表加载成功

代码讲解：

一、图片缩放

1、默认样式中将img的visibility属性设为hidden，即，在JS未操作时，不现实图片加载的进度；

dl背景图片为loading的GIF图。

2、网页打开时，若文档加载状态未完成，即window.document.readyState!==”complete”，则通过setInterval函数来自动检查文档的加载状态；

当window.document.readyState == “complete” 时，代表页面完全加载，调用函数reSize()，遍历id=”IMG”下的图片，用ImgSize()进行缩放和相应样式修改；

设置style.visibility为visible，显示缩放后的图片；

将缩放完成的图片所在的dl背景图片清空：style.backgroundImage=”none”;

clearInterval()清空定时器。

二、ImgSize()函数讲解

if(imgObj.height/imgObj.width>378/308) { //若图片比dl框“窄”

if(imgObj.height>378) //只判断高度不超过dl框即可，若高度超出

{

imgObj.height=378 //缩放图片高度。此时宽度必定小于dl框，不进行操作。

}

}

else //若图片比dl框“宽”

{

if(imgObj.width>308) //只判断宽度不超过dl框即可，若宽度超出

{

imgObj.width=308 //缩放图片宽度。此时高度必定小于dl框，不进行操作。

}

imgObj.style.visibility="visible";

imgObj.style.marginLeft=(308 - imgObj.width)/2+"px";

imgObj.style.marginTop=(378 - imgObj.height)/2+"px";

};

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

if(imgObj.height/imgObj.width>378/308){//若图片比dl框“窄”

if(imgObj.height>378)//只判断高度不超过dl框即可，若高度超出

{

imgObj.height=378//缩放图片高度。此时宽度必定小于dl框，不进行操作。

}

}

else//若图片比dl框“宽”

{

if(imgObj.width>308)//只判断宽度不超过dl框即可，若宽度超出

{

imgObj.width=308//缩放图片宽度。此时高度必定小于dl框，不进行操作。

}

imgObj.style.visibility="visible";

imgObj.style.marginLeft=(308-imgObj.width)/2+"px";

imgObj.style.marginTop=(378-imgObj.height)/2+"px";

};

三、设置图片的dl框中水平、垂直局中

imgObj.style.marginLeft=(308 – imgObj.width)/2+”px”;

imgObj.style.marginTop=(378 – imgObj.height)/2+”px”;

通过以上两个语句，设定图片的左、上间距，为dl宽高减去图片宽高的一半；此时图片将在dl框中水平、垂直局中。