HTML网页元素

• alt属性，src属性
• complete属性
• height属性，width属性
• naturalWidth属性，naturalHeight属性

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元素还支持以下事件。