精华内容
下载资源
问答
  • vue 图片加载完成事件

    千次阅读 2019-08-14 14:38:51
    当页面里有ajax请求数据,...想到了image的onload事件,当图片加载完成之后再显示页面 原生js <img onload="get(this)" src="..." style="display: none"/> <script type="text/javascript"> functi...

    当页面里有ajax请求数据,然后渲染图片的时候,dom会有展开的一瞬,产品觉得无法接受,so...
    想到了image的onload事件,当图片加载完成之后再显示页面


    • 原生js
    <img onload="get(this)"  src="..."  style="display: none"/>
    <script type="text/javascript">
    function get(ts){
        ts.style.display = 'block'
    }
    </script>
    
    • vue
    div(:class="$style.main", v-show="show")
        img(:src="datas.image", @load="loadImage")
    
    data() {
        return {
            show: false,
        }
    },
    methods:{
        loadImage(){
            let _this = this
            _this.show = true
        }
    }
    

    在图片加载完成之后再显示页面,就不会有图片展开的感觉,完美解决~


     

    展开全文
  • div onload事件

    万次阅读 2018-03-04 14:01:06
    写了个小页面,测试了下js, 想让div加载的时候执行一段js,死也不起作用。谷歌了一下发现div 不支持onload事件,同样p也是不支持onload事件的。这国内的各大教程都写着是支持各种事件的啊。坑。。...

    写了个小页面,测试了下js, 想让div在加载的时候执行一段js,死也不起作用。

    谷歌了一下发现div 不支持onload事件,同样p也是不支持onload事件的。

    这国内的各大教程都写着是支持各种事件的啊。坑。。

    https://stackoverflow.com/questions/4057236/how-to-add-onload-event-to-a-div-element

    https://stackoverflow.com/questions/5000248/how-to-run-this-javascript-in-the-p-element

    The onload event can only be used on the document(body) itself, frames, images, and scripts. In other words, it can be attached to only body and/or each external resource. The div is not an external resource and it’s loaded as part of the body, so the onload event doesn’t apply there.


    onload event it only supports with few tags like listed below.
    <body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>

    展开全文
  • JavaScript文档加载完成事件

    千次阅读 2013-12-07 23:00:37
    页面加载完成有两种事件,一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件),二是onload,指示页面包含图片等文件在内的所有元素都加载完成。(可以说:ready 在onload 前加载!!!) 我的理解:...

    页面加载完成有两种事件,一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件),二是onload,指示页面包含图片等文件在内的所有元素都加载完成。(可以说:ready 在onload 前加载!!!)

    我的理解: 一般样式控制的,比如图片大小控制放在onload 里面加载;

                  而:jS事件触发的方法,可以在ready 里面加载;



    用jQ的人很多人都是这么开始写脚本的:
     
    $(function(){
     
    // do something
     
    });
    其实这个就是jq ready()的简写,他等价于:
     
    $(document).ready(function(){
    //do something
    })
    //或者下面这个方法,jQuer的默认参数是:“document”;
    $().ready(function(){
    //do something
    })

     

     

    -----------------------------------------------------------------------------------------------------------------------------------------------

    $(document).Ready()方法 VS OnLoad事件 VS $(window).load()方法
    接触JQuery一般最先学到的是何时启动事件。在曾经很长一段时间里,在页面载入后引发的事件都被加载在”Body”的Onload事件里.
    对于Body的Onload事件和JQuery的Ready方法相比,有很多弊端.比如:
    1.加载多个函数的问题
    <body οnlοad="a();b();">
    </body>
    在Onload事件中只能这样加载,很丑陋…而在JQuery中你可以利用多个JQuery.Ready()方法,它们会按次序依次执行

    2.代码和内容不分离
      这个貌似不用说了,让人深恶痛绝-.-!!

    3.执行先后顺序不同
      对于Body.Onload事件,是在加载完所有页面内容才会触发,我的意思是所有内容,包括图片,flash等.如果页面的这些内容很多会让用户等待很长时间.
      而对于$(document).ready()方法,这个方法只是在页面所有的DOM加载完毕后就会触发,无疑很大的加快了网页的速度.
      但是对于一些特殊应用,比如图片的放大缩小,图片的剪裁。需要网页所有的内容加载完毕后才执行的呢?我推荐使用$(window).load()方法,这个方法会等到页面所有内容加载完毕后才会触发,并且同时又没有OnLoad事件的弊端.
      <script type="text/javascript">
            $(window).load(function() {
                alert("hello");
            });
            $(window).load(function() {
                alert("hello again");
            });
        </script>
      上面的代码会在页面所有内容加载完成后按先后顺序依次执行.
      当然不要忘了与之对应的Unload方法
    $(window).unload(function() {
                alert("good bye");
            });
    上面代码会在页面关闭时引发.
    在所有DOM加载之前引发JS代码
    这个方法是我在调试的时候最喜欢的,有时候开发的时候也用这种方法
    <body>
        <script type="text/javascript">
            (function() {
                alert("hi");
            })(jQuery)
        </script>
    </body>
    对,就是利用js闭包的形式将js代码嵌入body,这段代码会自动执行,当然也可以直接嵌入js代码,这种方式要注意顺序问题,如下:
    <body>
    <div id="test">this is the content</div>
        <script type="text/javascript">

            alert($("#test").html());//I Can display the content
           
        </script>
    </body>
    <body>
       <script type="text/javascript">

            alert($("#test").html());//I Can't display the content
           
        </script>
        <div id="test">this is the content</div>
    </body>
    上面两段代码,第二段代码当中因为只能解释到当前代码之前的DOM,而test并不存在于已经解析的DOM数.所以第二段代码无法正确显示.

    展开全文
  • iframe加载完成事件

    千次阅读 2017-01-10 11:32:54
    规定当指定元素加载完成时运行的函数。 当指定的元素(及子元素)已加载时,会发生 load() 事件。 该事件适用于任何带有 URL 的元素(比如图像、脚本、框架、内联框架)。 根据不同的浏览器(Fire...

    load方法介绍:

    $(selector).load(function)

    参数描述
    function必需。规定当指定元素加载完成时运行的函数。

    当指定的元素(及子元素)已加载时,会发生 load() 事件。
    该事件适用于任何带有 URL 的元素(比如图像、脚本、框架、内联框架)。
    根据不同的浏览器(Firefox 和 IE),如果图像已被缓存,则也许不会触发 load 事件。
    * 还有一个load方法,是通过ajax访问获取数据的
    load(url,data,function(response,status,xhr))

    iframe先模拟登陆再加载另一个页面的例子:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
      <head>
        <title>页面跳转中...</title>
        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="expires" content="0">    
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="This is my page">
        <meta content="text/html; charset=utf-8" http-equiv=Content-Type> 
        <script src="_files/jquery.js"></script>
        <script type="text/javascript">
            /*window.onbeforeunload = onbeforeunload_handler;
            function onbeforeunload_handler() {
                window.opener.location.reload();
                var warning = "确认退出?";
                return warning;
            }*/
             window.onbeforeunload =function(){
                window.opener.location="javascript:reloaddblist('OASYS');";
             }
    
            $(function(){   
                $("#login").load(function(){  
                    $("#wait").css("display","none");
                    var url = "${ospredirecUrl}"; 
                    $("#main").attr("src",url).css("display","block");
                });   
            });   
        </script>
    
        <script language=JavaScript> 
            var url = "http://xxxxxxx/login?action=doit"+"&loginname="+"${username}"+"&password="+"${password}";
            var p=0,j=0; 
            var c=new Array("lightskyblue","white") 
    
            setInterval('proccess();',50) 
    
            function proccess(){ 
                document.forms.proccess.elements[p].style.background=c[j]; 
                p+=1; 
                if(p==30){
                    p=0;j=1-j;
                }
            } 
        </script> 
        <style>
            .proccess { 
                background: #eee; border: 0px solid; height: 10px; margin: 3px; width: 10px 
            } 
        </style> 
    
      </head>
    
      <body style="OVERFLOW: hidden; OVERFLOW-Y: hidden"><!-- onload="loaded()" -->
      <iframe id="login" src="http://oa.sipc.cn/names.nsf?login&username=${username}&password=${password}" style="display: none"></iframe>
      <iframe id="main" style="width: 100%;height: 96%;display: none;border-style: none;margin: 0px;padding: 0px;"></iframe>
      <div id="wait" align=center> 
            <table align=center height="70%" valign="middle"> 
                <tbody> 
                    <tr> 
                        <td align=middle><p></p> 
                        <!-- Displaytext--> 
                        <P></P> 
                        <font class=fontbig style='font-size:20px'>数据加载中..... 
                        <!--End Displaytext--> 
                            <P></P> 
                            <P></P> 
                            <P></P> 
                            <P></P> 
                            <div align=center> 
                                <form method=post name=proccess> 
                                    <script language=javascript> 
                                        for(i=0;i<30;i++)document.write("<input class=proccess>") 
                                    </script> 
                                </form> 
                            </div> 
                        </font></td> 
                    </tr>
                </tbody>
            </table> 
        </div> 
      </body>
    </html>
    展开全文
  • AMap地图加载完成事件

    千次阅读 2017-01-05 16:53:00
    地图加载完成事件 title > < link rel ="stylesheet" href ="http://cache.amap.com/lbs/static/main1119.css" /> < script type ="text/javascript" src ="http://webapi.amap.com/maps?v=1.3&key=您...
  • 想到了image的onload事件,当图片加载完成之后再处理图片。 原生js <img "get(this)" src="..." style="display: none"/> <script type="text/javascript"> function get(ts){ ts.style.d...
  • 页面加载完成有两种事件,一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件),二是onload,指示页面包含图片等文件在内的所有元素都加载完成。(可以说:ready 在onload 前加载!!!) 我的理解:...
  • 1.加载元素 $.ajax({ type: "get", url:baseUrl + "/dict/classes", crossDomain:true, dataType:"json", cache:false, success: function(msg) { if...
  • Datable加载完成事件

    千次阅读 2019-08-06 17:12:42
    在网上找来找去都特么找不到我这就很尴尬 还是官网比较靠谱一点 一共有两种方法一种是: 1、initComplete: ...div class="loading">Loading</div>').appendTo('body'); $('#example...
  • Angular4_div 监听scroll事件

    千次阅读 2018-07-05 15:30:11
    scroll 事件,一个是window的,另一个不是。- - // handle host scroll @HostListener('scroll', ['$event']) public scrolled($event: Event) { this.elementScrollEvent($event); } // handle window scroll ...
  • 原理是先将需要展示内容的div单独提取出来,放到一个新的页面,在需要展示的时候,直接通过AJAX请求页面,然后展示,实现DIV加载,在数据多的时候可以将数据分成很多段,用户滚动到需要展示的位置在加载,大大提高...
  • 我们在写 jquery 的时候一般都会写 $(document).ready,加载完成事件还有一个就是 onload onload 与 ready 的区别是: 1、ready 是 DOM 加载完成的事件 2、onload 是所有内容加载完成(如:图片) 我们如果要...
  • window.onload与$(document).ready()比较 ... 需要等到网页中所有内容加载完成后执行(包括图片) 网页中DOM结构绘制完成后执行 编写个数 不能同时编写多个 可以同时编写执行多个 简化写法 无 ...
  • 页面加载完成有两种事件,一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件),二是onload,指示页 面包含图片等文件在内的所有元素都加载完成。(可以说:ready 在onload 前加载!!!) 我的理解...
  • AngularJS加载完成之后触发事件

    千次阅读 2017-03-15 09:08:41
    app.run(function ($timeout) {//等待AngularJS加载完成之后触发事件 var a = $timeout(function () { alert($('table tr').length); }, 1000); }); <th>id <th>name <td>{{item.id}} <td><a ...
  • 页面加载完成有两种事件: documnet.ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件) document.onload,指示页面包含图片等文件在内的所有元素都加载完成。 JQuery中的ready方法就是documnet.ready...
  • <!... < ...> ...给方框绑定事件 ...移除方框点击事件 ...div ...div ...div ...div ...div ...//DOM加载完成 window.ready(document, function () { alert( 'dom加载完毕' ); }); script > body > html >
  • 2 重载 里面的 onPageFinished(WebView view, String url)方法,(webview加载完成会调用这个方法),这个方法放自己想要做的事情,在webview加载完成以后 3 关联 你自己的webviewclient 与 webv
  • Angular中监控DIV层中的scroll事件

    千次阅读 2019-03-05 16:49:40
    1、先添加 angular 生命周期钩子: ngAfterViewInit() 钩子是在组件视图或者子组件视图初始化完成之后调用。 ngOnDestroy() 钩子是当Angular每次销毁指令/组件之前调用。 ngAfterViewInit() { this.ngScroll();...
  • 1、 单纯的copy一下代码是看不到运行的效果的,需要在第一个div和最后一个div里面添加足够多的内容,直到页面可以出现滚动效果才可以。 2、代码唯一要改的地方就是JQ核心文件和添加足够的div <...
  • } 加载 ${contextPath}/notepad/toCreate.do 页面到id为test的div中,加载完成之后,create页面中的js不会执行 这种方式没办法实现,换个思路: 代码如下:<div id=”test”> <iframe name=”testLoad” style=”...
  • 这周接了一个分享到QQ后者微信的分享页任务,里面有一个拖动div左右滑动的功能,由于第一次做,弄了五六个小时,终于出来了1.csstransition-duration: 0ms; 规定完成过渡效果需要花费的时间 transform: translate3d(0px,...
  • CSS为div添加尖角样式

    千次阅读 2018-06-07 11:03:46
    先来看一下尖角效果一个div,右侧边框的上出现了一个尖角的形状。那么如何来实现这么一个效果呢?1.原理对于一个块级元素,但我们分别将元素的上下左右四个border设置成一个比较大的像素(如10px),样式设置成solid...
  • 两个div交替隐藏显示,设置display属性为none,通过删除或添加样式能设为隐藏和显示。我点击显示div的时候,怎么触发了隐藏div事件啊。这是什么原因啊?求大神告知,怎么避免这种事发生啊。
  • Javascript - 正确使用div的mouseout事件

    千次阅读 2009-03-18 19:49:00
    在基于javascript的导航菜单中,很多情况下需要对鼠标是否已经离开了某个做出正确的判断,而仅仅对于这个的mouseout事件attach一个handler是无法正确的完成任务的,因为即使你attach了一个的onmouseout事件的handler...
  • JQuery 在DIV加载页面

    万次阅读 2012-11-22 11:01:26
    JQuery 在DIV加载页面 在做页面设计的时候,有时需要在一个页面上引入另一个页面,用jquery比较简单 index.html   ueditor 富文本编辑器 var editor_a =new baidu.editor.ui.Editor(); ...
  • 如果使用a标签跳转到指定的div区域,则只需要把a标签的href属性设置为“#divId”就好了,比如: 跳转到div <div di=dction_1> ...以上就是小编为大家带来的a标签跳转到指定div,jquery添加和移除class属性的

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 210,745
精华内容 84,298
关键字:

div加载完成事件