您的位置：首页 > 其它

IMG 元素的 complete 属性：不在标签上使用 onload 自动调整图像大小

2016-09-20 14:27 471 查看
关于网页中调整图像大小的方法大家肯定都会，通常情况下，我们会在 <img/> 标签内使用 onload 在图像加载完成后调用指定的函数来调整大图像的大小，为什么要 onload 之后呢？因为必须等图像加载完成之后，JS才能正确的得到图像的宽高，从而等比缩放图像。

那么问题是什么呢？其实由于一些特殊原因，我们无法保证能在指定区域里的每一个 <img/> 元素中都增加 onload，如果我们在统一的脚本中去获取那一块的 <img/> 元素，然后增加 onload 事件是不靠谱的，因为 onload 事件必须在图像加载完成之前增加到元素上，如果元素已经加载完成后再去附件 onload 事件，那么这个事件是不会被触发的。

如果我们能得知这个元素是否加载完成，那么就好办了，加载完成的话，直接调用指定的 JS 的函数来调整大小，没有加载完成，则赋于这个元素 onload 事件，把调整大小的函数放到 onload 中。

怎么知道这个元素是否加载完成呢？对 complete 属性，比如我们有一个图像元素的 ID 是 "image" ，则可以使用 document.getElementById("image").complete 来得到这个元素是否加载完成。这是一个布尔值，TRUE 则代表加载完成。

那么我们具体的实用演示见下：

view
source

print?

01
<!DOCTYPE
html PUBLIC
"-//W3C//DTD
XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
>
02
<html
xmlns=
"http://www.w3.org/1999/xhtml"
xml:lang=
"cn"
lang=
"cn"
>
03
<head>
04
<meta
http-equiv=
"Content-Language"
content=
"zh-CN"
/>
05
<meta
http-equiv=
"Content-Type"
content=
"text/html;
charset=gbk"
/>
06
<title>关于
IMG 元素的 complete 属性演示，自动调整图像大小 - VGOT.NET</title>
07
</head>
08
<body>
09
10
<p>这个演示主要是介绍
img 的 complete 属性，而不是如何调整图像大小，大家注意重心哈。</p>
11
<p>几张图片也只是我从网上随便搜的演示，不一定随时都能打开。</p>
12
13
<!--
这里先放几张图 -->
14
<div
id=
"content"
>
15
<img
src=
"http://bbsfile.ifeng.com/bbsfile/attachments/72_OZcuDZ3H9wqU.jpg"
 
border=
"0"
 
/>
16
<img
src=
"http://pic.nipic.com/2008-09-04/20089423244653_2.jpg"
 
border=
"0"
 
/>
17
<img
src=
"http://www.thegreatwall.com.cn/photo/upload/2005/10/11294617800.jpg"
 
border=
"0"
/>
18
</div>
19
20
</body>
21
<script
type=
"text/javascript"
>
22
//这下面的脚本建议就像这样放在网页底部
23
//不建议放在
window.onload 里，如果使用了 jQuery 则可以放在 $(document).ready(); 里
24
//或者参考这篇文章：http://www.vgot.net/?A65.htm
25
26
function
 
adjustImageSize()
{
27
//这里使用
this 指针来代替传参的当前元素，下面有解释
28
var
 
imgMaxWidth
= 350, imgMaxHeight = 300;
//图像限制的最大宽高
29
var
 
w
=
this
.offsetWidth,
h =
this
.offsetHeight;
//获取元素的宽高
30
31
//通过计算等比调整图像宽高
32
if
(imgMaxWidth
> 0 && w > imgMaxWidth) {
33
 
this
.width
= imgMaxWidth;
34
 
this
.height
= h/(w/imgMaxWidth);
35
}
else
 
if
(imgMaxHeight
> 0 && h > imgMaxHeight) {
36
 
this
.height
= imgMaxHeight;
37
 
this
.width
= w/(h/imgMaxHeight);
38
}
39
}
40
41
var
 
imgs
= document.getElementById(
"content"
).getElementsByTagName(
"img"
);
42
for
(
var
 
i=0;
i<imgs.length; i++) {
43
if
(imgs[i].complete)
{
//使用
complete 属性判断元素是否加载完成
44
 
//直接调用函数调整图像大小
45
 
//这里使用函数的
call() 方法将函数的 this 指针改为 imgs[i] 元素
46
 
adjustImageSize.call(imgs[i]);
47
}
else
 
{
48
 
//没有加载完成则将函数赋到元素的
onload 事件中
49
 
//onload
的内部 this 指针本身就是它所属的元素
50
 
imgs[i].onload
= adjustImageSize;
51
}
52
}
53
</script>
54
</html>
点击这里下载示例文件：auto adjust image size.htm

本文内容由 VGOT Design 原创，转载请保留原文链接：http://vgot.net/?A234.htm
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                

                    
                

            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航