在页面加载完成之后可能在某种特殊的情况下需要添加jQuery.那么请注意onreadystatechange和onload这俩个方法.
代码:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="javascript">
var test=function(){
var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js";
script.onload=script.onreadystatechange=function(){
/*
*用"!script.readyState"判断浏览器是否支持onload方法,
*如果"!script.readyState=false"者说明浏览器是IE,
*接下来只需判断script.readState属性是否是'loaded'或'complete',
*这俩个属性都说明js已经加载完毕.
*/
if(!script.readyState||script.readyState == 'loaded'||script.readyState == 'complete'){
jQuery(function(){
alert($('div').html());
});
}
};
//在head中添加script标签
document.documentElement.firstChild.appendChild(script);
};
</script>
</head>
<body onload="test()">
<div>我是测试代码!</div>
</body>
</html>
chrome/ff会在script加载完毕后调用onload()方法.
IE6-8会在script.readyState='loaded'或script.readyState == 'complete'的时候调用onreadystatechange()方法.
在某些情况我们不清楚当前的document是否已经加载完毕,如果还没有加载完毕的话,我们就需要修改一下上面的代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="javascript">
//判断当前document是否已经加载完毕
if (document.body && (!document.readyState || document.readyState == 'complete') ){
//因为情况所限,if里的代码不会执行.
var script = document.createElement( 'script' );
script.type = 'text/javascript';
script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js";
script.onload=script.onreadystatechange=function(){
/*
*用"!script.readyState"判断浏览器是否支持onload方法,
*如果"!script.readyState=false"者说明浏览器是IE,
*接下来只需判断script.readState属性是否是'loaded'或'complete',
*这俩个属性都说明js已经加载完毕.
*/
if(!script.readyState||script.readyState == 'loaded'||script.readyState == 'complete'){
alert($('div').html());
}
};
//在head中添加script标签
document.documentElement.firstChild.appendChild(script);
}else{
document.write( '<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"><\/script>' );
window.onload=function(){
alert($('div').html()+"!!!");
};
}
</script>
</head>
<body>
<div>我是测试代码!</div>
</body>
</html>
分享到：
相关推荐
jQuery LazyLoad 是一个jQuery插件，它的主要功能是在用户滚动页面到图片所在位置时才开始加载图片，而不是在页面初始加载时就一次性加载所有图片。这种方式大大减少了首次加载页面时的数据量，提高了页面的加载速度...
在网页开发中，用户体验至关重要，尤其是...总的来说，"简单jQuery加载等待转圈页面插件"是提升网页加载体验的实用工具，它通过jQuery的便利性和强大的DOM操作能力，为开发者提供了快速集成和定制加载提示的解决方案。
在网页设计中，为了提高页面加载速度和用户体验，懒加载（Lazy Load）技术被广泛应用。尤其是在图片密集型的网站上，非首屏的图片可以延迟加载，直到用户滚动到相应位置时才开始加载，这样可以显著减少首屏加载时间...
一、jQuery加载一个html页面到指定的div里 把a.html里面的某一部份的内容加载到b.html的一个div里。 比如：加载a.html里面的“row”>这个div里面的所有内容加载到b.html的这个div里”content”> 用jquery ajax 可以...
这通常涉及到Ajax技术，通过异步方式获取数据并在页面上动态插入元素。例如，当用户提交表单后，我们可能需要显示一个加载中的提示，然后在后台处理完成后，再显示处理结果。使用jQuery，我们可以方便地监听事件，...
在页面的特定元素上显示加载指示器，可以避免用户看到不完整的或未加载完毕的内容，提高交互体验。 首先，我们需要创建一个表示加载状态的HTML元素，例如一个div，我们可以将其CSS样式设置为一个旋转的圆圈或者一个...
2. **预加载策略**：对于重要图片，比如页面顶部的大图，可以考虑在页面加载时就进行预加载，防止用户在滚动时出现明显的加载延迟。 3. **动画效果**：加载图片时，可以添加过渡效果，比如淡入、渐显，提升用户体验...
在SharePoint环境中添加jQuery涉及到对SharePoint页面结构的理解和利用SharePoint的自定义功能。SharePoint 2010提供了一种方式来扩展其默认功能，允许开发者在页面中引入额外的JavaScript库，如jQuery。以下是如何...
我们将在其中添加代码来检测是否达到了页面底部。 要判断是否到达底部，可以使用以下代码： ```javascript var windowHeight = $(window).height(); // 获取窗口高度 var documentHeight = $(document).height(); ...
"jquery动态页面加载进度条"就是一种优化用户体验的工具，它通过在页面加载过程中展示一个直观的进度条，让用户知道页面正在加载并估计加载完成的时间，从而减少用户的等待焦虑感。这个插件基于JavaScript库jQuery...
首先，需要在页面中引入jQuery库和EasyLazyload的脚本文件。然后，为需要懒加载的图片添加相应的数据属性。最后，初始化EasyLazyload插件，设置所需的配置选项。 4. **事件监听**： `EasyLazyload` 提供了一些...
而异步加载则是在页面基本结构加载完成后，根据用户的交互或特定条件，只加载需要的部分内容，这种方式显著提高了页面响应速度。 在jQuery中，$.ajax()函数是实现异步加载的核心。它可以配置多个参数，如URL、类型...
2. **上拉加载更多**：当用户在页面底部向上拉动时，会触发加载更多数据的事件。这在处理无限滚动列表时非常有用，可以动态加载新的内容而无需用户点击加载按钮。 **三、使用步骤** 1. **引入依赖**：首先，在HTML...
例如，通过`$(document).ready()`函数确保在页面加载完成后执行我们的代码。 创建一个简单的加载提示，我们可以使用jQuery的`.show()`和`.hide()`方法来显示和隐藏元素。首先在HTML中设置一个用于显示加载提示的...
它们通常包括一系列CSS类和JavaScript函数，用于在页面内容加载前展示一个动画效果。在本例中，可能有多个CSS文件（如load5.css、load4.css等）分别定义了不同样式的加载动画，这样可以根据需要选择或切换不同的加载...
这样可以避免在页面初始化时就加载大量数据，从而降低服务器负担，加快页面显示速度。 jQuery是广泛使用的JavaScript库，它提供了丰富的API和插件来实现各种功能，包括懒加载。在jQuery中，我们可以使用专门的插件...
在本案例中，jQuery被用来创建浮动层，即一个覆盖在网页上的透明或半透明层，它会在页面内容加载期间显示，以告知用户页面正在处理数据。 浮动层通常是一个弹出窗口，可以设置为全屏或只占据屏幕的一部分。在...
6. **动态加载和卸载**：如果需要在父页面中动态添加或删除子页面，jQuery提供了`append()`、`prepend()`、`remove()`等方法。例如，`$("#parentDiv").append('<iframe src="childPage.html"></iframe>')`将在`#...
本文将详细介绍如何使用jQuery来加载页面，并在页面加载完成后执行代码，同时讨论window.onload与$(document).ready两者之间的差异。 ### 1. window.onload与$(document).ready的区别 window.onload是原生...
3. **编写预加载函数**：使用jQuery，编写预加载函数，这个函数通常会在页面加载完成后或指定事件触发时执行。函数内部会按照设定的顺序和速度，逐个加载和显示区块。 4. **设置动画效果**：为了让预加载更具视觉...