`
『抹·茶』
  • 浏览: 6795 次
  • 性别: Icon_minigender_1
  • 来自: 沈阳
社区版块
存档分类
最新评论

JS中的load(转)

阅读更多
用$(window).load(function(){...})而不用body.onload()的几个理由
首先它们都是在页面所有元素(包括html标签以及引用到得所有图片,Flash等媒体)加载完毕后执行的,这是它们的共同点.

不用body.Onload()理由1:

如果我们想同时加载多个函数,我们必须这样写

<body onload="fn1(),fn2()"></body>看起来极其丑陋,如果用$(window).load()我们可以这样加载多个函数
$(window).load(function() {
            alert("hello,我是jQuery!");
  });
$(window).load(function() {
        alert("hello,我也是jQuery");
});

这样写它会从上往下执行这两个函数,并且看起来漂亮多了.

不用body.Onload()理由2:

用body.Onload()不能够做到js和html完全分离,这是一个很严重的问题.

另外用$(window).load(function(){...})和body.onload()都存在同样一个问题,因为开始也说到了,它们都需要等到页面的所有内容

加载完毕才执行,但是如果当网速比较慢的时候,加载一个页面往往需要较长的时间(几秒到十几秒不等,甚至更长...),所以我们经常

会遇到页面还没有完全加载完毕而用户已经在操作页面了这种情况,这样页面表现出来的效果就跟我们预期的效果不一样了,

所以在这里我推荐使用$(document).ready(function(){}),或简写为$(function(){}),因为他会在页面的dom元素加载完毕后就执行,
而无需等到图片或其他媒体下载完毕.

但是有时候确实我们有需要等到页面的所有东西都加载完后再执行我们想执行的函数,所以是该使用$(window).load(function(){...})还是

该使用$(function(){})往往需要结合具体需要而作不同的选择.

最后附上一段在所有DOM元素加载之前执行的jQuery代码

<script type="text/javascript">

(function() {
            alert("DOM还没加载哦!");
        })(jQuery)
  </script>
分享到:
评论

相关推荐

    js lazyLoad 图片懒加载demo

    标题中的"js lazyLoad 图片懒加载demo"指的是一个使用JavaScript实现的图片懒加载示例项目。在这个项目中,开发者可能会用到一个名为`lazyload.js`的插件,该插件帮助简化了图片懒加载的实现过程。 描述中提到的...

    lazyload-JavaScript

    "lazyload"是指在JavaScript中实现的延迟加载策略,它只在用户滚动到视口附近的图片时才加载图片,而不是在页面初次渲染时一次性加载所有图片。这种技术尤其适用于内容丰富的网页,如博客、社交媒体或者电子商务网站...

    loadTemplate.js实例

    `loadTemplate.js` 是一个JavaScript库,它在jQuery(jq)的基础上运行,用于帮助开发者更高效地实现前端模板加载和渲染。在这个实例中,我们将深入探讨`loadTemplate.js`的使用方法以及它如何适应前后端分离的开发...

    jQuery中load()方法语法格式

    ### jQuery中load()方法语法格式详解 在前端开发领域,jQuery因其简洁的API和强大的功能,长期以来备受开发者青睐。其中一个非常实用的方法就是`load()`,它允许开发者以异步方式加载远程HTML文档或文档片段,并将...

    lazyload.js演示页面

    标题中的“lazyload.js演示页面”表明这是一个关于延迟加载技术的示例,主要使用了名为“lazyload.js”的JavaScript库。延迟加载,或称为懒加载,是一种优化网页性能的策略,它只在用户滚动到视口附近的图片或内容时...

    Node.js-load-json-file-读取和解析JSON文件

    总的来说,`load-json-file`是Node.js开发中处理JSON文件的一个强大工具,它简化了文件操作,提高了代码的可读性和可靠性。通过利用Promise,它也很好地适应了现代异步编程的需求。如果你经常处理JSON数据,那么这个...

    jquery.lazyload.js

    jQuery.Lazyload.js是一个高效实用的JavaScript插件,它能够显著提升网页加载速度,同时赋予网页图片渐显效果,从而创造出既美观又高效的网页浏览体验。 jQuery.Lazyload.js的核心原理在于"懒加载"(Lazy Loading)...

    jQuery.lazyload.js

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的. 在包含很多...

    图片延迟加载,lazyload.js使用实例

    `lazyload.js` 是一个实现图片延迟加载的JavaScript库,它的特点是轻量级且易于使用,没有多余的代码,使得开发者能够快速地集成到项目中。在本文中,我们将深入探讨`lazyload.js`的工作原理、使用方法以及如何在...

    load-image.min.js

    load-image.min.js 是jQuery File Upload上传组件中必须的一个js,否则会报TypeError: loadImage.parseMetaData is not a function错误。不过现在的load-image.min.js中没有parseMetaData 这个方法,但是这个方法在...

    lazyload.js实现图片异步延迟加载

    在本文中,我们将深入探讨如何使用`lazyload.js`这个JavaScript库来实现这一功能。 ### 1. 懒加载原理 懒加载的基本原理是,当用户滚动页面时,只加载视口内的图片,而那些位于视口之外的图片则暂时不加载。当用户...

    js lazyload实现网页图片延迟加载特效

    在网页设计中,为了提高页面加载速度和优化用户体验,一种常见的技术是图片延迟加载,也称为懒加载(Lazy Load)。JavaScript 是实现这一功能的主要工具,它允许我们在用户滚动到图片时才加载图片,而不是一次性加载...

    lazyload.js图片延迟加载(懒加载)插件

    - **jquery.lazyload.js**:这是懒加载插件的核心文件,包含了实现图片延迟加载功能的JavaScript代码,需要在网页中引入并进行适当配置。 - **图片延迟加载(懒加载)jQuery插件**:可能是一个包含使用该插件的HTML、...

    ExtJs中Store加载(load)时候提示信息

    当Store在加载(load)数据过程中,向用户提供明确的提示信息,不仅能够提升用户体验,还能增加应用的专业度。以下是对如何在ExtJS中实现Store加载时显示提示信息的详细解析。 ### Store加载时显示提示信息 在...

    jquery.lazyload.js 图片懒加载 --demo

    **jQuery LazyLoad.js 图片懒加载技术...- **引入库文件**:首先,你需要在HTML文档中引入jQuery库和LazyLoad.js插件的JavaScript文件。通常,这两个文件应放在`&lt;head&gt;`标签内,或者在`&lt;/body&gt;`标签之前。 ```html ...

    jquery.lazyload.min.js

    jquery.lazyload.min.js插件 直接下载引入即可~~~~~~~

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

    在给定的标题和描述中提到的"lazyload.js"和"scrollloading.js"就是实现这一功能的JavaScript库。 1. **什么是页面延迟加载(Lazy Loading)?** 页面延迟加载,也称为懒加载,是一种优化策略,主要用于图像、视频...

Global site tag (gtag.js) - Google Analytics