zoukankan      html  css  js  c++  java
  • 如何判断控件是否已加载完成

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

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

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

     我每天都在进步

  • 相关阅读:
    逆序对
    归并排序
    快速排序
    利用WPF InkCanvas水墨控件圈选移动笔画
    Vue使用websocket进行心跳连接
    socket + vue + canvas实践,你画我猜(一)
    Vue+WebSocket+ES6+Canvas 制作【你画我猜】小游戏
    HTML5 canvas实现画板功能
    Canvas手工作图并实时同步复现(利用websocket)
    什么是SoC?
  • 原文地址:https://www.cnblogs.com/jjhe369/p/1672820.html
Copyright © 2011-2022 走看看