<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="box">
<!--<img src="img/1.jpg" id="imgtest"/>-->
</div>
</body>
<script type="text/javascript">
var box = document.getElementById("box");
//1、 创建 image 对象
var imgObj1 = new Image;
// 第二种方法
var imgObj2 = document.createElement("img");
// 2、部分属性
imgObj1.src = "img/1.jpg";
imgObj1.width = 100;
imgObj1.height = 200;
imgObj1.border = "1px solid red";
// 图片水平的间隔
imgObj1.hspace = 150;
// 垂直的间隔
imgObj1.vspace = 150;
// 3、把图片对象添加到文档中
box.appendChild(imgObj1);
// 4、图片对象事件（方法）
// 图片加载完毕之后
imgObj1.onload = function(){
console.log("图片加载完毕");
}
// 加载错误
imgObj1.onerror = function(){
console.log("图片加载错误");
}
// 图片加载过程中被打断（例如，图片正在加载，用户突然点击了取消按钮）
imgObj1.onabort = function(){
console.log("爷不等了");
}
</script>
</html>