Javascript基础_09DOM高级操作

来源：互联网发布：python legend 编辑：程序博客网时间：2024/05/09 21:12

1 Image对象

1.1 Image对象的创建方式

1）通过构造函数方式创建

var img = new Image('500','500');

第一个参数为宽度，第二个参数为高度

2）通过document.createElement()创建img对象

var img = document.createElement('img');

1.2 图像对象的属性

border 图像边；compele图片是否加载完成；height,width,src；hspace左右边距；vspace上下边距；name名称

1.3 图像对象的事件

1）onabort如果图片加载被中断,执行该事件

2）onload当图片加载完之后调用该事件

3）onerror当图片加载出现错误时,调用该事件

4）onkeydown,onkeypress,onkeyup按下键触发事件，长按键触发事件，抬起键触发事件

举例说明：

var img = document.createElement('img');//通过document.createElement()创建img对象var body = document.getElementsByTagName("body")[0];//获取body标签//当图片加载完之后调用该事件img.onload = function(){console.log("当图片加载完之后显示");//打印图片地址console.log("img.src=="+img.src);//是否加载完成true或者falseconsole.log("complete=="+img.complete);};//注意:src一定写在onload事件之后,否则程序在IE会报错//如果图片加载被中断,执行该事件img.onabort = function(){alert("图片加载中断");};//当加载失败时触发img.onerror = function(){alert("当加载失败时触发");};img.src = "http://www.siaa.org.cn/Uploads/Editor/2015-06-19/5583bfebd6e71.jpg";//距离左边的距离img.hspace = "300";//距离上边的一个距离img.vspace = "100";body.appendChild(img);

注意：1)新的图像元素不一定要从添加到文档中才开始进行下载,只要设置了src属性就会开始下载

2)IE8以下,opera不支持oneror事件的

2 懒加载

懒加载又叫延迟加载，主要应用于图片比较多的网站或者导购网站

懒加载步骤：

1）mage中src放一张占位图

2）真实图片放到data-*(其中*可以任意取名)中

3）配合页面滚动事件使用,

滚动时判断:带加载的资源相对于浏览器顶端的距离(offsetTop)<=可视区相对于浏览器顶端的距离(document.scrollTop+window.innerHeight)如果true就把真实图片的地址赋给src进行加载显示

3 data属性

1)data-*用于存储页面或应用程序私有自定义数据

2)data-*也可以为html所有元素嵌入自定义data属性的能力

3)存放在data-*中的数据或资源是不会进数据请求或数据库查询的

4)data-*中的*可以取任意名称如:data-img,data-url,data-zhansan

举例说明：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">ul{width: 800px;margin: 300px auto 0;padding: 0;}li{list-style: none;width: 800px;height: 500px;border: 1px solid red;margin-bottom: 200px;}li img{width: 100%;height: 100%;}</style></head><body><ul id="ul"><li><img src="img/t1.png" data-img ="http://pic9.nipic.com/20100917/5653289_174123627849_2.jpg"/></li><li><img src="img/t1.png" data-img ="http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1212/24/c1/16846983_1356330189927_800x600.jpg"/></li><li><img src="img/t1.png" data-img ="http://a.hiphotos.baidu.com/image/pic/item/ae51f3deb48f8c54d477a12438292df5e0fe7f10.jpg"/></li><li><img src="img/t1.png" data-img ="http://f.hiphotos.baidu.com/image/pic/item/c2cec3fdfc039245831fa7498294a4c27c1e25c9.jpg"/></li><li><img src="img/t1.png" data-img ="http://pic9.nipic.com/20100917/5653289_174123627849_2.jpg"/></li><li><img src="img/t1.png" data-img ="http://f.hiphotos.baidu.com/image/pic/item/c2cec3fdfc039245831fa7498294a4c27c1e25c9.jpg"/></li><li><img src="img/t1.png" data-img ="http://pic9.nipic.com/20100917/5653289_174123627849_2.jpg"/></li></ul><script type="text/javascript">window.onload = function(){var lis = document.getElementsByTagName("li");window.onscroll = function(){//1.获取当前窗口滚动的一个高度(前者标准后者IE支持的方法)      var scrollTop = document.body.scrollTop||document.documentElement.scrollTop;//2.获取可视区域的一个高度(前者标准后者IE支持的方法)     var height = window.innerHeight||document.documentElement.clientHeight;// 开始设置   for (var i = 0;i < lis.length;i++) {   var img = lis[i].children[0];// 判断   if (lis[i].offsetTop <=scrollTop+ height) {    img.src = img.getAttribute('data-img');    }   }};};</script></body></html>

0 0