direktori cari
导论 前言 为什么学习JavaScript JavaScript的历史 基本语法 语法概述 数值 字符串 对象 数组 函数 运算符 数据类型转换 错误处理机制 JavaScript 编程风格 标准库 Object对象 包装对象和Boolean对象 Number对象 String对象 Math对象 Date对象 RegExp对象 JSON对象 ArrayBuffer:类型化数组 面向对象编程 概述 封装 继承 模块化编程 DOM Node节点 document节点 Element对象 Text节点和DocumentFragment节点 Event对象 CSS操作 Mutation Observer 浏览器对象 浏览器的JavaScript引擎 定时器 window对象 history对象 Ajax 同域限制和window.postMessage方法 Web Storage:浏览器端数据储存机制 IndexedDB:浏览器端数据库 Web Notifications API Performance API 移动设备API HTML网页元素 Canvas API SVG 图像 表单 文件和二进制数据的操作 Web Worker 服务器发送事件 Page Visibility API Fullscreen API:全屏操作 Web Speech requestAnimationFrame WebSocket WebRTC Web Components HTML网页的API HTML网页元素 Canvas API SVG 图像 表单 文件和二进制数据的操作 Web Worker 服务器发送事件 Page Visibility API Fullscreen API:全屏操作 Web Speech requestAnimationFrame WebSocket WebRTC Web Components 开发工具 console对象 PhantomJS Bower:客户端库管理工具 Grunt:任务自动管理工具 Gulp:任务自动管理工具 Browserify:浏览器加载Node.js模块 RequireJS和AMD规范 Source Map JavaScript 程序测试 JavaScript高级语法 Promise对象 有限状态机 MVC框架与Backbone.js 严格模式 ECMAScript 6 介绍 附录 JavaScript API列表
watak

    • image元素

      • alt属性,src属性

      • complete属性

      • height属性,width属性

      • naturalWidth属性,naturalHeight属性

    • audio元素,video元素

image元素

alt属性,src属性

alt属性返回image元素的HTML标签的alt属性值,src属性返回image元素的HTML标签的src属性值。

// 方法一:HTML5构造函数Image
var img1 = new Image(); 
img1.src = 'image1.png';
img1.alt = 'alt';
document.body.appendChild(img1);

// 方法二:DOM HTMLImageElement
var img2 = document.createElement('img'); 
img2.src = 'image2.jpg';
img2.alt = 'alt text';
document.body.appendChild(img2);

document.images[0].src
// image1.png

complete属性

complete属性返回一个布尔值,true表示当前图像属于浏览器支持的图形类型,并且加载完成,解码过程没有出错,否则就返回false。

height属性,width属性

这两个属性返回image元素被浏览器渲染后的高度和宽度。

naturalWidth属性,naturalHeight属性

这两个属性只读,表示image对象真实的宽度和高度。

myImage.addEventListener('onload', function() {
    console.log('My width is: ', this.naturalWidth);
    console.log('My height is: ', this.naturalHeight);
});

audio元素,video元素

audio元素和video元素加载音频和视频时,以下事件按次序发生。

  • loadstart:开始加载音频和视频。

  • durationchange:音频和视频的duration属性(时长)发生变化时触发,即已经知道媒体文件的长度。如果没有指定音频和视频文件,duration属性等于NaN。如果播放流媒体文件,没有明确的结束时间,duration属性等于Inf(Infinity)。

  • loadedmetadata:媒体文件的元数据加载完毕时触发,元数据包括duration(时长)、dimensions(大小,视频独有)和文字轨。

  • loadeddata:媒体文件的第一帧加载完毕时触发,此时整个文件还没有加载完。

  • progress:浏览器正在下载媒体文件,周期性触发。下载信息保存在元素的buffered属性中。

  • canplay:浏览器准备好播放,即使只有几帧,readyState属性变为CAN_PLAY。

  • canplaythrough:浏览器认为可以不缓冲(buffering)播放时触发,即当前下载速度保持不低于播放速度,readyState属性变为CAN_PLAY_THROUGH。

除了上面这些事件,audio元素和video元素还支持以下事件。

事件触发条件
abort播放中断
emptied媒体文件加载后又被清空,比如加载后又调用load方法重新加载。
ended播放结束
error发生错误。该元素的error属性包含更多信息。
pause播放暂停
play暂停后重新开始播放
playing开始播放,包括第一次播放、暂停后播放、结束后重新播放。
ratechange播放速率改变
seeked搜索操作结束
seeking搜索操作开始
stalled浏览器开始尝试读取媒体文件,但是没有如预期那样获取数据
suspend加载文件停止,有可能是播放结束,也有可能是其他原因的暂停
timeupdate网页元素的currentTime属性改变时触发。
volumechange音量改变时触发(包括静音)。
waiting由于另一个操作(比如搜索)还没有结束,导致当前操作(比如播放)不得不等待。


Artikel sebelumnya: Artikel seterusnya: