• 【javascript】onload load ready的那些事


      首先明确一下页面加载的步骤:

      1、下载解析HTML文档结构

      2、加载外部脚本文件与样式表文件

      3、解析并执行脚本代码

      4、构造HTML DOM模型

      5 、加载图片等外部文件

      6、页面加载完毕  


      接下来,我们分别介绍一下三者:

      load()方法:

        load()方法总共有两种,分别是 jquery的load()方法和jquery Ajax的load()方法。

        如何区别两个方法在于参数的不同。

        jQuery:

          当指定的元素(及子元素)已加载时,会发生 load() 事件。

          该事件适用于任何带有 URL 的元素(比如图像、脚本、框架、内联框架)。

          根据不同的浏览器(Firefox 和 IE),如果图像已被缓存,则也许不会触发 load 事件。

          语法:

            $(selector).load(function)

        jQuery Ajax:

          通过 AJAX 请求从服务器加载数据,并把返回的数据放置到指定的元素中。

          语法:

            load(url,data,function(response,status,xhr))

        load事件必须等到网页中所有内容全部加载完毕之后才被执行。即上述的第六步完成后再运行函数。如果一个网页中有大量的图片的话,则就会出现这种情况:网页文档已经呈现出来,但由于网页数据还没有完全加载完毕,导致load事件不能够即时被触发。所以当我们要加载一个特别大的图片时,如果没有在图片标签就限制了图片的大小,而是在load内设置图片大小,就会造成图片先把页面撑开,等到图片全部加载完毕后再改变其大小的问题。这样以来,用户体验就会非常的差。

      ready()方法:

        ready()方法在上述第4步完成后运行,即DOM结构绘制完成之后就绘执行。这样能确保就算有大量的媒体文件没加载出来,JS代码一样可以执行。

        语法:

          $(document).ready(function)

          $().ready(function)

          $(function)

        上面三种写法效果是一样的,后两种写法是第一种写法的简写方式。

        于是,上述特别大图片的加载情况最好就是把图片的设置放到ready()方法中来,这样等到开始加载图片时,就已经给图片设置了大小,这样就不会造成图片把页面撑开而破坏页面布局的情况发生了。

      onload()事件:

        前两者为jQuery的方法,而onload()是js的一个事件,就如同onclick()事件一样。

        onload 事件会在页面或图像加载完成后立即发生。

        语法:

          onload="SomeJavascriptCode"


      这样就可以看出来三者的区别了,load()和ready()是jQuery的方法,onload()是js的一个事件。

      如果文档中没有相关联的图片等媒体文件的话,使用load()和使用ready()性能上没有多大的区别,不过如果存在,则使用ready()会避免很多麻烦。

      还有load()方法只有一个起作用,即当你运行多个load()方法时,只有最后一个起作用,而ready()方法则可以同时运行多个,这也是ready()方法相对于load()方法的优势之处。

      所以在需要使用这一方法时,尽量使用ready()方法。

      至于onload()事件,则如同onclick()、onmouseover()等事件一样,使用方法也没有区别。这就是onload()和load()的区别,看起来似乎一样,不过却是完全不同的两者。

  • 相关阅读:
    Elasticsearch学习,请先看这一篇!
    加解密/数字签名/证书 原理
    C# 给对象赋null值会释放内存吗?
    打包常见问题
    友盟推送
    谈一谈可能用到数据持久化的地方
    浅谈设置字体大小
    AFN和SDWebImage请求网络图片的一点问题
    linux学习(1)——这是一个新的开始,加油吧少年
    C指针——简单总结
  • 原文地址:https://www.cnblogs.com/linxiong945/p/4081912.html
Copyright © 2020-2023  润新知