js的image()对象属性方法介绍及image()对象操作实例

责编:menVScode 2017-11-15 11:19 阅读(1055)

Image对象操作实例        js中Dom的image对象的属性。

align:设置图片与内联内容的对齐方式
alt:设置或返回图片无法显示时的文字
complete:浏览器判断图片是否加载完整    
border:设置或者返回图片周围的边框
height:设置或返回图片的高度
width:设置或返回图片的宽度
isMap:返回图像是否是服务器端的图像映射。  这个是否可以用做判断从数据库中拿到的数据是否正确?
useMap:设置或返回客户端图像映射的 usemap 属性的值。
id:设置或者返回图片的id  利用id操作图片
name:设置或者返回图片的name 
hspace:设置或者返回图片左或者右的空白部分
vspace:设置或者返回图片上或者下的空白部分
longDesc:设置或返回指向包含图像描述的文档的 URL。(即alt或者是有文字的图片中的文字)
lowsrc:设置或返回指向图像的低分辨率版本的 URL。
src:设置或返回图像的 URL。

        new Image()实例属性也有优先级。每创建一个img标签<img/> Image对象也跟着被创建,下面是对image属性的运用。

<img id="img" class="img" src="img/3.jpg" lowsrc="img/6.jpg" alt="menvscode.com-MVC前端网" />

    js代码部分

//Image中的align属性   js在页面中的位置也很重要,因为html的翻译是从上至下的。因此要特别注意js的位置
document.getElementById("img").align="left";//图片的align属性值默认为center!

//Image中的alt属性  
document.getElementById("img").alt="图片的alt属性"; //设置alt的内容
//alert(document.getElementById("img").alt); //获取图片alt的内容

//Image中的complete属性  由于是判断浏览器是否对图片已完成加载,因此需要html中的body标签调用这个属性来判断 利用的是onload事件  
//complete返回的值是布尔类型 即只有true或者false
function alterImage(){
    alert("Image loaded=" + document.getElementById("img").complete)
} 

//Image中的border属性  与css样式中的border不同的是,Image中的border属性只需大小,不需要设置其他的属性
document.getElementById("img").border="3";

//Image中的height/width属性  只需要数值,不需要带上单位
document.getElementById("img").height="200";
document.getElementById("img").width="400";
//Image中的isMap属性 (暂时先忽略)

//Image中的 id属性 设置id名获取id名
alert(document.getElementById("img").id);
document.getElementById("img").id="img";

//Image中的name属性 由于没设置那么属性,因此返回的是空值
alert(document.getElementById("img").name);
//Image中的hspace/vspace属性   hspace 和 vspace 属性可与 align 一同使用,来设置图像与周围文本的距离。
document.getElementById("img").hspace="50";
document.getElementById("img").vspace="50"

//Image中的src/lowsrc属性  可用于更换图片查找图片路径等;
document.getElementById("img").src="img/3.jpg";

var x=document.getElementById("img");
document.write('<a href="' + x.lowsrc + '">Low resolution version</a>'); //点击跳转到低版本的图片

//Image中的longDesc属性

        

image()对象操作实例

        创建一个Image对象:var a=new Image(); 定义Image对象的src: a.src=”xxx.gif”; 这样做就相当于给浏览器缓存了一张图片。 

        图像对象: 建立图像对象:图像对象名称=new Image([宽度],[高度]) 

        图像对象的属性: border complete height hspace lowsrc name src vspace width 

        图像对象的事件:onabort onerror onkeydown onkeypress onkeyup onload 

        需要注意的是:src 属性一定要写到 onload 的后面,否则程序在 IE 中会出错。

window.onload = function(){
    var body = document.getElementsByTagName("body")[0];
    //  1.创建Image对象
    //第一种方式
    var img = new Image('300','300');
    //第二种方式
    //var img = document.createElement('img');
    //接受两个参数,设置宽、高

    //hspace 设置或返回图像左侧和右侧的空白
    img.hspace = "100";
    //vspace 设置或返回图像的顶部和底部的空白
    img.vspace = "100";

    //当图像装载完毕时调用的事件句柄。
    img.onload = function() {
        console.log("当图片加载完时出现");
         //打印图片的地址
        console.log("src:"+img.src);
        //打印图片的高度
         console.log("height:"+img.height);
        //是否加载完成 完成返回true
        console.log("complete:"+img.complete);
        //打印图片的水平距离
        console.log("hspace:"+img.hspace);
    };
    //在装载图像的过程中发生错误时调用的事件句柄。
    img.onerror = function(){
        alert("图片加载错误时,发生调用");
    };

    //如果图像的加载被中断,则会显示一个对话框:
    img.onabort = function(){
        alert("图片图像的加载被中断");
    };
    //新的图像元素不一定要从添加文档后才开始下载,只要设置了src属性就会开始下载

    //由于我们这个事件目的是在图片加载完之后显示某些信息,而图片下载并不是把image对象添加到DOM中才开始下载,而是赋予src时就开始下载了,所以为避免网速过快,src已经加载完,事件还并没有被触发的这种极端情况,我们要将src放在事件之后添加

        body.appendChild(img);
        img.src = "http://www.005.tv/uploads/allimg/161009/1523215548-0.jpg";
        /*注意
         * ie 火狐等大众浏览器均支持 Image对象的onload事件。
            ie8及以下、opera 不支持onerror事件
         * */

};


标签: image() 对象 js
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码