JS image对象 

<!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>

 

posted @ 2016-06-29 16:56  PowellZhao  阅读(1713)  评论(0)  编辑  收藏  举报