js 缩略图
日期：2014-05-16 浏览次数：20512 次
求助 js 缩略图
<html>
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 ">
<title> 缩略图 </title>
<script>
function ImgAuto(MaxWidth,MaxHeight)
{
for (i = 0; i < document.images.length; i++) {
var img=document.images[i];
var HeightWidth=img.offsetHeight/img.offsetWidth;
var WidthHeight=img.offsetWidth/img.offsetHeight;
if(img.readyState!= "complete "){
return false;
}
if(img.offsetWidth> MaxWidth){
img.width=MaxWidth;
img.height=MaxWidth*HeightWidth;
}
if(img.offsetHeight> MaxHeight){
img.height=MaxHeight;
img.width=MaxHeight*WidthHeight;
}
}
}
</script>
</head>
<body onload= "ImgAuto(200,200) ">
<img src= 'file:///D:/My%20Documents/My%20Pictures/MM/1.jpg '>
<img src= 'file:///D:/My%20Documents/My%20Pictures/MM/2.jpg '>
<img src= 'file:///D:/My%20Documents/My%20Pictures/MM/3.jpg '>
</body>
</html>
上面可以将图片正确的缩略，但我想将 <body onload= "ImgAuto(200,200) "> 替换成window.onload=ImgAuto(200,200)就出错了，为什么？谁有没有更好的处理缩略图的办法？
------解决方案--------------------
用window.onload=ImgAuto(200,200) 肯定会出错的,因为图片都没加载到页面,
方法是:页面加载的图片先隐藏,在加载完后用ImgAuto(宽,高);
例如:
<html>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 ">
<title> 缩略图 </title>
<script>
function ImgAuto(MaxWidth,MaxHeight)
{
for (i = 0; i < document.images.length; i++) {
var img=document.images[i];
var HeightWidth=img.offsetHeight/img.offsetWidth;
var WidthHeight=img.offsetWidth/img.offsetHeight;
if(img.readyState!= "complete "){
return false;
}
if(img.offsetWidth> MaxWidth){
img.width=MaxWidth;
img.height=MaxWidth*HeightWidth;
}
if(img.offsetHeight> MaxHeight){
img.height=MaxHeight;
img.width=MaxHeight*WidthHeight;
}
}
}
function show_all(divId){
var img_f=document.getElmentById(divId);
img_f.style.display= "block ";
}
</script>
</head>
<body>
<div id= "img_frame " style= "display:none ">
<img src= "/../**.gif "/>
<img src= "/../**.gif "/>
<img src= "/../**.gif "/>
<img src= "/../**.gif "/>
</div>
<script type= "text/javascript>
ImgAuto(200,200);
show_all( "img_frame ");
</script>
</body>
</htm>
<html>
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 ">
<title> 缩略图 </title>
<script>
function ImgAuto(MaxWidth,MaxHeight)
{
for (i = 0; i < document.images.length; i++) {
var img=document.images[i];
var HeightWidth=img.offsetHeight/img.offsetWidth;
var WidthHeight=img.offsetWidth/img.offsetHeight;
if(img.readyState!= "complete "){
return false;
}
if(img.offsetWidth> MaxWidth){
img.width=MaxWidth;
img.height=MaxWidth*HeightWidth;
}
if(img.offsetHeight> MaxHeight){
img.height=MaxHeight;
img.width=MaxHeight*WidthHeight;
}
}
}
</script>
</head>
<body onload= "ImgAuto(200,200) ">
<img src= 'file:///D:/My%20Documents/My%20Pictures/MM/1.jpg '>
<img src= 'file:///D:/My%20Documents/My%20Pictures/MM/2.jpg '>
<img src= 'file:///D:/My%20Documents/My%20Pictures/MM/3.jpg '>
</body>
</html>
上面可以将图片正确的缩略，但我想将 <body onload= "ImgAuto(200,200) "> 替换成window.onload=ImgAuto(200,200)就出错了，为什么？谁有没有更好的处理缩略图的办法？
------解决方案--------------------
用window.onload=ImgAuto(200,200) 肯定会出错的,因为图片都没加载到页面,
方法是:页面加载的图片先隐藏,在加载完后用ImgAuto(宽,高);
例如:
<html>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 ">
<title> 缩略图 </title>
<script>
function ImgAuto(MaxWidth,MaxHeight)
{
for (i = 0; i < document.images.length; i++) {
var img=document.images[i];
var HeightWidth=img.offsetHeight/img.offsetWidth;
var WidthHeight=img.offsetWidth/img.offsetHeight;
if(img.readyState!= "complete "){
return false;
}
if(img.offsetWidth> MaxWidth){
img.width=MaxWidth;
img.height=MaxWidth*HeightWidth;
}
if(img.offsetHeight> MaxHeight){
img.height=MaxHeight;
img.width=MaxHeight*WidthHeight;
}
}
}
function show_all(divId){
var img_f=document.getElmentById(divId);
img_f.style.display= "block ";
}
</script>
</head>
<body>
<div id= "img_frame " style= "display:none ">
<img src= "/../**.gif "/>
<img src= "/../**.gif "/>
<img src= "/../**.gif "/>
<img src= "/../**.gif "/>
</div>
<script type= "text/javascript>
ImgAuto(200,200);
show_all( "img_frame ");
</script>
</body>
</htm>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
