`

(转)页面自动加载js方法

js 
阅读更多

转自:https://www.cnblogs.com/2huos/p/js-autorun.html

 

一、JS方法
1.最简单的调用方式,直接写到html的body标签里面:

<html> 
    <body onload="load();">
    </body> 
</html>

 

 

2.在JS语句调用:

<script type="text/javascript">
    function myfun()   {    
        alert("this window.onload");   
    }   
    /*用window.onload调用myfun()*/ 
     
    // 不要括号
    window.onload = myfun;
</script>
 

 

3。Js调用 onload方法 

<script type="text/javascript">
    window.onload = function(){
        func1();
        func2();
        func3(); 
    }
</script>

 


二、JQ方法

1.整个页面的document全部加载完成以后执行。不幸的这种方式不仅要求页面的DOM tree全部加载完成,而且要求所有的外部图片和资源全部加载完成。更不幸的是,如果外部资源,例如图片需要很长时间来加载,那么这个js方法执行感觉就比较慢了。也就是说这是一种最严谨的页面加载完再执行方法的方法。

window.onload =function() { 
    $("table tr:nth-child(even)").addClass("even"); 
    //这个是jquery代码 
};

 

2.仅只需要加载所有的DOM结构,在浏览器把所有的HTML放入DOM tree之前就执行方法。包括在加载外部图片和资源之前。

$(document).ready(function() { 
    //任何需要执行的js特效
    $("table tr:nth-child(even)").addClass("even"); 
});

 

有一种灰常简便的写法:

 

$(function() { 
    $("table tr:nth-child(even)").addClass("even"); 
    //任何需要执行的js特效
}
分享到:
评论

相关推荐

    页面滚动到底部自动加载数据

    页面滚动到底部自动加载数据,也被称为无限滚动或滚动加载,是现代网页设计中常见的一种交互方式。这种技术允许用户在浏览网页时无需点击分页按钮,只需将页面滚动到最底部,更多内容就会自动加载出来,提高了用户...

    js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法

    页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空间,...

    JSP页面加载时提示"正在加载中"

    任何jsp页面只要使用包含附件中的loading.jsp将自动拥有“页面正在加载的。。”提示信息,在页面加载完后将自动隐藏。 我为什么使用这个组件? 1。交互性。 客户清楚知道,你的页面是在加载,需要等待,而不用...

    js实现页面加载完毕之前loading提示效果

    这样,当页面的DOM结构完全加载完成后,“loading”提示就会自动消失,用户将看到完整的页面内容。这种方法简单有效,能够很好地提升用户体验,尤其是在处理大量数据或者复杂的网页交互时。 总结来说,通过在HTML中...

    页面加载 带旋转特效的js代码

    这样,当页面内容全部加载完成后,旋转动画会自动消失,用户可以看到完整的页面内容。 **四、优化与扩展** 1. **延迟显示**:为了提供更好的用户体验,我们可以在页面开始加载时延迟显示加载动画,比如使用`...

    页面延迟加载JS包 lazyload.js scrollloading.js

    页面延迟加载技术是一种优化网页性能的方法,它允许我们推迟非关键资源的加载,直到它们真正需要时才进行加载。在给定的标题和描述中提到的"lazyload.js"和"scrollloading.js"就是实现这一功能的JavaScript库。 1. ...

    JQ 自动加载页面

    标题“JQ 自动加载页面”指的是使用jQuery库实现页面内容的自动加载功能。这种技术在网页开发中常用于分页、无限滚动或是动态加载更多内容的场景,以提高用户体验,减少用户手动翻页的繁琐操作。jQuery是一个流行的...

    页面加载完成,js实现自动跳转

    js实现自动跳转,大家多下哈, 资源难得,几秒种跳转只需要修改后面的参数就行了!

    javaScript 页面自动加载事件详解

    在现代网页开发中,JavaScript 页面自动加载事件是确保页面内容正确加载并且能够及时与用户交互的重要手段。这些事件能够在页面加载的不同阶段触发相应的JavaScript函数,从而执行必要的操作。 首先,我们要了解的...

    拖动滚动条自动加载图片页面

    4. `jquery.scrollLoading.js`:这个文件可能是基于jQuery编写的脚本,专门用于实现滚动条自动加载图片或页面内容的功能。它可能包含了监听滚动事件、判断加载时机、请求新数据以及插入新内容到页面等逻辑。 综上所...

    H5自动加载数据

    后台查询所有数据返回给html页面,页面上初始化加载10条数据,如果小于10条则加载该数据,如果大于10条则拉到屏幕底部会自动加载下一个10条。

    jQuery实现的自动加载页面功能示例

    - `scrollPagination.js`还提供了`.stopScrollPagination`方法,用于禁用自动加载。这是一个非常实用的功能,允许用户在需要时停止自动加载,转而采用手动加载或直接跳转到下一页。 通过上述内容分析,我们可以...

    vue动态加载js.zip

    Vue动态加载JS是一种实现这一需求的技术,它允许我们在运行时根据需要加载JavaScript文件。本文将深入探讨Vue动态加载JavaScript的原理、方法以及其实现步骤。 首先,我们需要理解Vue动态加载的核心概念。在HTML中...

    网页按顺序加载 最后加载js广告

    在这个过程中,浏览器会按照HTML、CSS、JavaScript的顺序逐行解析资源,最后加载JS广告。这样的加载策略有助于优化用户体验,因为主要内容可以更快地呈现给用户,而广告通常被视为非关键元素。 首先,我们来看网页...

    JS当前页面和框架自动刷新的方法

    在探讨“JS当前页面和框架自动刷新的方法”这一主题时,我们主要关注的是如何利用JavaScript来实现网页及其框架内的页面自动或手动刷新的功能。本文将深入解析提供的代码示例,并详细阐述各种刷新方法的工作原理及...

    让html页面不缓存js的实现方法

    很多朋友都会碰到这样的情况:如果我们页面加载了js的话下次打开时也会是调用这个js缓存文件,但对于我们调试时是非常的不方便了,本文就来谈论如何解决这一问题,下面一起来看看。 不缓存JS的方法其实挺简单,CSS在...

    h5单页面上拉刷新下拉加载

    下拉加载也称为“滚动加载”或“无限滚动”,当用户滚动到页面顶部或接近顶部时,新的内容会自动加载。这一功能同样通过JavaScript实现,通过监听滚动事件并计算滚动位置,当达到预设的阈值时,请求更多数据。CSS...

    页面加载时 提示 正在加载中

    在描述中提到,任何JSP页面只要包含这个`loading.jsp`,就能自动展示"页面正在加载..."的提示。这通常通过在HTML的`&lt;head&gt;`部分引用`loading.jsp`来实现,或者使用`&lt;jsp:include&gt;`标签在页面的特定位置插入`loading....

    简单jQuery加载等待转圈页面插件

    - JavaScript文件:这是实现加载等待功能的核心代码,通常命名为`jquery.loading.js`。 - CSS文件:用于定义加载动画的样式,可能命名为`loading.css`。 - 示例HTML文件:展示了如何在页面中使用该插件,可能命名为`...

    酷炫 html5页面加载 loading动画效果 demo 基于原生无第三方依赖

    原生JavaScript提供了`window.onload`或`DOMContentLoaded`事件,可以在这些事件触发时执行相应的代码,确保加载动画在页面内容开始显示时启动,并在页面完全加载后消失。 为了让加载动画生效,HTML中还需要一个...

Global site tag (gtag.js) - Google Analytics