首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

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

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

    jQuery模拟页面加载进度条

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

    2.1K10

    页面加载完运行jsv_yixinla(转)

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

    71630

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

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

    1.6K40

    spring 容器初始化完成后执行某个方法

    ContextRefreshedEvent> { @Override public void onApplicationEvent(ContextRefreshedEvent event) { //需要执行的逻辑代码,spring...容器初始化完成后就会执行该方法。...-- Spring容器启动完成后执行下面的这个Bean --> <bean class="com.yk.test.executor.processor.InstantiationTracingBeanPostProcessor...为了避免上面提到的问题,我们可以只在root application context初始化<em>完成后</em>调用逻辑代码,其他的容器的初始化完成,则不做任何处理,修改后代码 如下: @Override public...//需要执行的逻辑代码,<em>当</em>spring容器初始化<em>完成后</em>就会执行该方法。 } } 其实更简单的方法是使用注解:`@PostConstruct`,只需要在需要启动的时候执行的方法上标注这个注解就搞定了。

    2.9K100

    jQuery实现图片懒加载

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

    13.6K20
    领券