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


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

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

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

  • 相关阅读:
    应用开发笔记|MYD-YA157-V2 BSP多种方式的快速更新
    【新品发布】米尔MYC-CZU5EV新品登场,预售开启!一触即发
    价值3499元的米尔百度大脑EdgeBoard边缘AI计算盒免费试用
    Arm Development Studio 2020.1-1 Linux 64Bit下载
    Arm Development Studio 2020.1-1 Windows 64Bit下载
    应用开发笔记 | 米尔科技MYD-YA157C-V2开发板WIFI&BT 模块的移植
    Shiro简介
    Redis学习系列文章目录
    ASP.NET Core框架学习系列文章目录
    docker 基本原理
  • 原文地址:https://www.cnblogs.com/goole/p/1785382.html
Copyright © 2020-2023  润新知