IMG 元素的 complete 属性:不在标签上使用 onload 自动调整图像大小
来源:互联网 发布:澳洲网络制式 编辑:程序博客网 时间:2024/06/16 21:56
关于网页中调整图像大小的方法大家肯定都会,通常情况下,我们会在 <img/> 标签内使用 onload 在图像加载完成后调用指定的函数来调整大图像的大小,为什么要 onload 之后呢?因为必须等图像加载完成之后,JS才能正确的得到图像的宽高,从而等比缩放图像。
那么问题是什么呢?其实由于一些特殊原因,我们无法保证能在指定区域里的每一个 <img/> 元素中都增加 onload,如果我们在统一的脚本中去获取那一块的 <img/> 元素,然后增加 onload 事件是不靠谱的,因为 onload 事件必须在图像加载完成之前增加到元素上,如果元素已经加载完成后再去附件 onload 事件,那么这个事件是不会被触发的。
如果我们能得知这个元素是否加载完成,那么就好办了,加载完成的话,直接调用指定的 JS 的函数来调整大小,没有加载完成,则赋于这个元素 onload 事件,把调整大小的函数放到 onload 中。
怎么知道这个元素是否加载完成呢?对 complete 属性,比如我们有一个图像元素的 ID 是 "image" ,则可以使用 document.getElementById("image").complete 来得到这个元素是否加载完成。这是一个布尔值,TRUE 则代表加载完成。
那么我们具体的实用演示见下:
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
0 0
- IMG 元素的 complete 属性:不在标签上使用 onload 自动调整图像大小
- img.onload事件和img.complete属性的简介和应用
- 前端HTML<img>标签图像的属性和使用/图像img与背景background的区别
- js图片缓存即img的onload事件与complete属性之间关系
- 不在body标签上加载onload事件,实现这种效果
- 根据窗口大小自动调整元素大小
- window.onload and showModalDialog根据内容自动调整窗口大小
- img标签的galleryimg属性
- <img> 标签的 alt 属性
- img标签的使用
- 调整图像大小的PHP
- img标签中alt和title属性的正确使用
- img标签中alt和title属性的正确使用
- img的complete跟onload(可有人懂最后的问题彩蛋)
- 图片加载失败之后的处理(引申一下img的complete和onload方法)
- iframe 的自动大小调整
- CSpitterWnd的自动调整大小
- HTML-图像的使用(img标签和map标签的使用)
- 淘宝服饰精品广告
- 装箱与拆箱
- startActivityForResult和setResult详解
- Android声音管理AudioManager使用 (2012-09-09 11:09:15)
- 使用printk的注意点
- IMG 元素的 complete 属性:不在标签上使用 onload 自动调整图像大小
- 关于 iOS 10 中 ATS 的问题
- 初学git的各种用法
- 共享锁【S锁】 排他锁【X锁】
- pdo
- Git_ 基本操作_第2课_Git利用命令行对 Config配置的 增删查改
- Reverse Linked List(反转链表)
- 设计模式(3)------建造者模式
- 机器学习技法作业二题目12-18