• 如何判断控件是否已加载完成


      判断一个控件是否已加载完成其实很简单,就是利用浏览器的解析顺序。通俗的说,代码的位置越靠前,就越先加载。例如:

    <input id="btnPost" type="button" value="button" />
    <img src="../jqueryui/themes/base/images/ui-icons_cd0a0a_256x240.png" alt="" id="imga" />

    浏览器在解析时,首先加载 input标签,然后加载img标签。

      此时如果想判断img标签是否加载完成,可以在img标签的前后加上脚本,例如

    代码
    <div id="loading"></div>
    <input id="btnPost" type="button" value="button" />
    <script type="text/javascript">
        
    var msg = document.getElementById("imga");
        
    if (msg == null
    ) {
            document.getElementById(
    "loading").innerHTML = "正在生成图片控件...";//此处使用setTimeout函数不管用

        }
        
    </script>

    <img src="../jqueryui/themes/base/images/ui-icons_cd0a0a_256x240.png" alt="" id="imga"/>
    <script> document.getElementById("loading").innerHTML = "";</script>

    注意此时的img标签前后的js代码,上面的js代码先获取img对象,然后判断该对象是否为空,如果是空的话说明没有加载完成,那么提示用户“正在生成图片控件”,加载完成后将提示信息隐藏。

      上面的方法适用于所有控件或标签,但是对于本身就具有onload事件的控件或标签(该事件在对应的控件或标签加载完成后触发),我们完全可以把img后面的代码封装成一个函数供onload调用,如下

    代码
      <script type="text/javascript">
          
    function loadedImg() { document.getElementById("loading").innerHTML = ""; }
      
    </script>
    </head>
    <body >

    <input id="autocomplete"/>
    <div id="loading"></div>
    <input id="btnPost" type="button" value="button" />
    <script type="text/javascript">
        
    var msg = document.getElementById("imga");
        
    if (msg == null) {
            document.getElementById(
    "loading").innerHTML = "正在图片控件...";//此处使用setTimeout函数不管用
        }
        
    </script>
    <img src="../jqueryui/themes/base/images/ui-icons_cd0a0a_256x240.png" alt="" id="imga" onload="loadedImg();"/>
       
    </body>

    从上面的代码可以看出,img标签后面的代码已经封装成loadedimg方法被img的onload调用。

      那哪些控件或标签具有onload事件呢?我在网上查了,如下(不知道全不全):

    <body>, <frame>, <frameset>, <iframe>, <img>, <link>, <script>

    行了就是这么多了,有问题留言

     我每天都在进步

  • 相关阅读:
    ActiveMQ 即时通讯服务 浅析
    Asp.net Mvc (Filter及其执行顺序)
    ActiveMQ基本介绍
    ActiveMQ持久化消息的三种方式
    Windows Azure Virtual Machine (27) 使用psping工具,测试Azure VM网络连通性
    Azure China (10) 使用Azure China SAS Token
    Windows Azure Affinity Groups (3) 修改虚拟网络地缘组(Affinity Group)的配置
    Windows Azure Storage (22) Azure Storage如何支持多级目录
    Windows Azure Virtual Machine (26) 使用高级存储(SSD)和DS系列VM
    Azure Redis Cache (2) 创建和使用Azure Redis Cache
  • 原文地址:https://www.cnblogs.com/jjhe369/p/1672820.html
Copyright © 2020-2023  润新知