js事件3

一、loading——(用来加载位于网页中的文件,而非本地的)
例子:
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="div1">loading...... <span id="span1">0%</span></div>
</body>

<script type="text/javascript">
    var arr=["http://h.hiphotos.baidu.com/image/pic/item/00e93901213fb80e6c1c307635d12f2eb8389445.jpg","http://e.hiphotos.baidu.com/image/pic/item/5882b2b7d0a20cf4d51141c275094b36acaf992e.jpg","http://f.hiphotos.baidu.com/image/pic/item/d62a6059252dd42aedabbeb6003b5bb5c9eab809.jpg"];

    var div1=document.getElementById("div1");
    var span1=document.getElementById("span1");

    var imgs=[];
    var index=0;

    for (var i=0; i<arr.length; i++){

        var imgObj=new Image();
        imgObj.src=arr[i];

        imgObj.onload=function (){

            index++;
            span1.innerHTML=parseInt(index/arr.length*100)+"%";
            imgs.push(this);

            if (index==arr.length){
                //全部加载完毕
                div1.innerHTML="";

                for (var j=0; j<arr.length; j++){

                    div1.appendChild(imgs[j]);
                }
            }
        }
    }
</script>
</html>
  • DOMContentLoaded:相当于onload
js事件3
js事件3
 
二、read——window.onload 比 HTML 部分加载速度快
  • window.onload:html,css,image,js,音频,flash
  •  read:DOM,css
 
三、事件委托
  • js事件3
    js事件3
  • e.target:触发的对象,上图为对象 ul1 
  • e.target.tagname:获取事件源,触发的对象标签名,上图为ul1对应的标签
  • 兼容:
    • e.target:用于高级浏览器
    • e.srcElement:用于低级浏览器
 
四、传参
  • 方法一(最原始)
js事件3
js事件3
  • 方法二
js事件3
js事件3
  • 方法三
js事件3
js事件3
  • 方法四(最高端实用)
js事件3
js事件3
 
更多相关文章
  •    一.考虑到安全因素,为了避免将服务端的异常发送给客户端.默认情况下,服务端出现异常会对异常屏蔽处理后,再发送到客户端.所以客户端捕捉到的异常都是同一个FaultException异常. 例如在服务端直接产生一个空引用异常,客户端捕获到的是上述异常. 服务端: class Program { s ...
  • 上周我们发布了传统编程语言的工作趋势 ,今天我们将来研究网页编程语言的趋势,包括 Ruby,Python,PHP,JavaScript,Groovy和Erlang.我并没有包括Flex因为关于Flex的数据很不准确.我也想涵盖Haskell,但是关于这个语言的数据实在太少. 下图是来自 Indeed ...
  • 之前MVC5和之前的版本中,我们要想对View文件的路径进行控制的话,则必须要对IViewEngine接口的FindPartialView或FindView方法进行重写,所有的视图引擎都继承于该IViewEngine接口,比如默认的RazorViewEngine.但新版本MVC6中,对视图文件的路径 ...
  • 一.脚本源码 使用VBS脚本遍历XML文件   1 Option Explicit 2 3 '定义常量 4 Const NodeElement = 1 '元素 5 Const NodeText = 3 '文本 6 Const NodeCDATA = 4 'CDATA 7 Const NodeEnti ...
  •   Debian.FC.Ubuntu的默认中文输入法都是SCIM,其实也挺好用的,有点类似windows下微软拼音输入法,而fcitx则有点类似windows下的紫光输入法,喜欢哪一个要看个人习惯了.我试用了一下,感觉比SCIM好用一些.下面说明如何做到开机启动Fcitx,因为debian默认启动的 ...
  •     有时,你想执行一些操作,但是这些操作必须让所有用户都登出后才能执行,例如加强安全设置,创建虚拟公司等.这时,你可以使用系统的耗尽用户(Darin Users)功能.下面跟随Reinhard一起,设置耗尽用户吧.     进入System Administration>Common> ...
一周排行
  • 看内核时总遇到if(likely( )){}或是if(unlikely( ))这样的语句,最初不解其意,现在有所了解,所以也想介绍一下.likely() 与 unlikely()是内核(我看的是2.6.22.6版本, ...
  • 作者:<纽约时报>撰稿人Tanzina Vega和Brian X. Chen三星也许会输掉与苹果的美国诉讼大战,但这并未能阻止该公司向苹果发动新一轮攻击,这一次的策略更加公众化--整版广告.三星在本周的新 ...
  • 题目:求1+2+···+n,要求不能使用乘除法.for.while.if.else.switch.case等关键字及条件判断语句(A?B:C).   点评:这个问题本身没有太多的实际意义,因为在软件开发中不可能有这么 ...
  • 欢迎使用Markdown编辑器写博客 本Markdown编辑器使用StackEdit修改而来,用它写博客,将会带来全新的体验哦: Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和图片上传 La ...
  • 1.什么是Ajax   Ajax是异步Javascript和XML(Asynchronous JavaScript and XML)的英文缩写."Ajax"这个名词的发明人是Jesse James ...
  •   基于 DSP TMS320C6455的6U CPCI高速信号处理板卡 1. 板卡概述 基于 DSP TMS320C6455的CPCI高速信号处理板卡是新一代高速DSP处理平台,广泛用于DSP性能验证,信号仿真平台 ...
  • mysql新建用户和授权的方法总是记不住,在此记下来 创建用户 create user 'username'@'host' identified by 'password'; 用户授权 grant all on da ...
  • 线上运行了一套辅助系统是利用了开源的PHP改的,之前也没怎么玩过PHP,没想到这玩意儿还是有不少坑的.突然某一天一个用户做线上活动推广,然后短时间内涌进来了上万的请求,然后数据库连接耗尽,短时间内几乎拖垮了整个系统. ...
  • 看到有人要google服务包,由于游戏验证的需要和我自己对Google Play的钟情, 李伦.苦于在网上找google服务框架及安装方法,但是竟没一个成功的,下到东西了,Play也用不成! 当然,终极方法是机油们的 ...
  • 积累信用成就“钻石小鸟” 经营品种:钻饰.银饰规模: 中型等级:中上级 雇工:5人 月营业额:10万-20万元 月净收益:1万-2万元 网上开店最基本的就是讲信用,靠买家给予信用评价,好评可以顺水推舟,差评有时候则具 ...