首页
学习
活动
专区
圈层
工具
发布

使用原生 JavaScript 在页面加载完成后处理多个函数

JavaScript 正确的使用方法应该是 脚本与 HTML 元素分离、当页面加载完成之后再去执行。本文就来讲解如何使用原生 JavaScript 来实现。...window.onload 事件 onload 事件只有在整个页面已经完全载入的时候才会被触发,我们将 JavaScript 代码写进 onload 事件中,就可以保证在 HTML 元素被加载完成之后,...结合监听器和 window.onload 实现页面加载完处理多个函数 这里需要特别提到监听器的一个优势:可以为一个元素上的同一个事件添加或者去除多个处理函数。...前面说过 window.onload 事件加载的缺陷是只能在页面中使用一次。而使用监听器的方法,就可以监听为 window 的 onload 事件分别加载多个函数了。...这样,就实现了页面加载完成之后处理多个函数了。 ----

4.6K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    用jQuery模拟页面加载进度条

    因为我们无法通过任何方法获取整个页面的大小和当前加载了多少,所以想制作一个加载进度条的唯一办法就是模拟。那要怎么模拟呢?   ...我们知道,页面是从上往下执行的,也就是说我们可以大致估算出在页面的某个位置加载了多少,而后用jq模拟出一个进度条来显示。   ...0%   这时候注意了,我们要引用jquery库,引用的位置不是在head区域,而是紧接着html代码下面写。...为什么要这样,因为样式我们放head里的原因是保证页面加载第一步就把样式加载好,这样页面不会乱。而JS则不需要,再加上页面上大的文件主要也就是js,所以放在body里加载js是为了进度条考虑。   ...,然后,我用了其他几个js库做加载进度测试 loading('正在加载jQuery UI',30); <script type

    2.8K10

    原生js与jquery加载页面元素比较

    原生js与jquery加载页面元素比较 原生js:将获取元素的语句写到页面头部,会因为元素还没有加载而出错,js提供了window.onload 这个方法事先加载元素 页面头部,会因为元素还没有加载而出错,jquery提供了ready方法解决这个问题,它的速度比原生的 window.onload 更快。...-3.4.1.min.js"> // 1 原生js加载页面元素,window.onload(...()方法 jquery加载页面元素通过ready()方法 开发中常用jquery的ready简写写法 使用jquery需要事先下载jquery库(压缩版和完整版,开发中加载压缩版即可,完整版用于平时读源码...),用srcipt标签导入jquery库的压缩版 使用jquery库需要另写一个script标签,在里面写jquery代码 ready比windown.load要快的原因是,window.load是等标签加载完

    12.9K30

    当页面加载完运行jsv_yixinla(转)

    1.用原生js window.onload=function(){ } 2.用jquery $(document).ready(function(){ }); 简写 $(function(){ });...PS:两者的主要区别 window.onload: 当一个文档完全下载到浏览器中时,才会触发window.onload事件。...这意味着页面上的全部元素对js而言都是可以操作的,也就是说页面上的所有元素加载完毕才会执行。这种情况对编写功能性代码非常有利,因为无需考虑加载的次序。...换句话说,当HMTL下载完成并解析为DOM树之后,代码就会执行。 举一个例子: 假设有一个表现图库的页面,这种页面中可能会包含许多大型图像,我们可以通过jQuery隐藏、显示或以其他方式操作这些图像。...如果我们通过onload页面设置界面,那么用户在能够使用这个页面之前,必须要等到每一幅图像都下载完成。

    99130

    从零开始学 Web 之 jQuery(一)jQuery的概念,页面加载事件

    因为有一些兼容或功能没有封装在 jQuery 里面,必须通过原生 js 操作,所以需要 jQuery对象转DOM对象。当这一步操作完之后,再次转回 jQuery 对象,可以更方便的操作页面元素。...3、jQuery对象.val();表示获取该对象 value 属性的值; 4、jQuery对象.val("值");表示设置该对象 value 属性的值; 四、页面加载事件 1、DOM中页面加载事件...特点:整个页面的所有元素,文本,图片等全部加载完才会执行。...特点:整个页面的所有元素,文本,图片等全部加载完才会执行。...$ 也可以换成 jQuery。 特点:不是整个页面的所有元素,而是页面中的基本元素加载完后就执行,所以比使用 load 的方式快一些。

    2.2K40

    当数据开始“感知页面”

    说出来有点反直觉:爬虫连页面“什么时候算加载完”都判断错了。而且最糟糕的是,系统当时完全不知道自己已经出问题了。一、事情是怎么发生的我们有一套跑了挺久的内容采集系统,目标站点是典型的JS渲染页面。...页面加载时间没有异常。代理IP的可用率也很高。CPU和内存都很平稳。从系统视角来看,这套爬虫运行得非常健康。但业务数据很快打破了这种错觉:关键字段大量为空。原本几十条的数据列表,只剩下十几条。...换句话说,爬虫开始解析页面的时候,页面的“骨架”已经在了,但内容还没填充完成。我们抓到的不是错误页面,而是一个尚未完成的页面状态。五、为什么之前一直没暴露这个问题事后回看,其实并不容易提前发现。...第一,不再单纯相信“页面加载完成”。不再依赖load或networkidle,而是直接检查关键业务节点是否真正可用。第二,让爬虫开始“感知页面状态”。...最后这句话,是我个人在这次事故后的真实感受:当网页开始“思考”,爬虫就不能再只是一个简单的搬运工了。

    17210

    jQuery实现图片懒加载

    一、懒加载 1.什么是懒加载 目前,网络上各大论坛,尤其是一些图片类型的网站上,在图片加载时均采用了一种名为懒加载的方式,具体表现为,当页面被请求时,只加载可视区域的图片,其它部分的图片则不加载,只有这些图片出现在可视区域时才会动态加载这些图片...2.懒加载的原理 页面中的img元素,如果没有src属性,浏览器就不会发出请求去下载图片,只有通过javascript设置了图片路径,浏览器才会发送请求。...懒加载的原理就是先在页面中把所有的图片统一使用一张占位图进行占位,把正真的路径存在元素的自定义属性“data-src”(这个名字起个自己认识好记的就行)里,要用的时候就取出来,把它的值赋值给img的src...这三个函数获取的是元素的高度,而不是元素到页面顶部的高度,要获取元素到页面顶部的高度可以用offset().top。...2.当滚动页面时,检查页面所有的img标签,看看这个标签是否出现到我们的视野,当出现在我们的视野时 再去判断它是否已经加载过,如果没有加载,加载它 */

    15.6K20
    领券