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

最新推荐文章于 2023-05-08 18:01:17 发布

hsany330

最新推荐文章于 2023-05-08 18:01:17 发布

阅读量2k

点赞数

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

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

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

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

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

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

点击这里下载示例文件：auto adjust image size.htm

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

hsany330

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
IMG 元素的 complete 属性：不在标签上使用 onload 自动调整图像大小

关于网页中调整图像大小的方法大家肯定都会，通常情况下，我们会在标签内使用 onload 在图像加载完成后调用指定的函数来调整大图像的大小，为什么要 onload 之后呢？因为必须等图像加载完成之后，JS才能正确的得到图像的宽高，从而等比缩放图像。那么问题是什么呢？其实由于一些特殊原因，我们无法保证能在指定区域里的每一个元素中都增加 onload，如果我们在统一的脚本中去获取那一块的
复制链接

扫一扫