jQuery的domReady

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>jQuery的DOMready</title>
        <script>
            var domReady = function(fn){
                var completed = function() {
                    document.removeEventListener( "DOMContentLoaded", completed, false );
                    window.removeEventListener( "load", completed, false );
                    fn();
                };

                // 如果dom已经准备好了,那就开始咯
                if ( document.readyState === "complete" ) {
                    setTimeout( domReady,0,fn );

                } else {
                    document.addEventListener( "DOMContentLoaded", completed, false );
                    // 保险起见加个load事件咯
                    window.addEventListener( "load", completed, false );
                }

            }
            domReady(function(){
                alert(document.querySelectorAll(".test")[0].innerHTML);
            });
        </script>
    </head>
    <body>
        jQuery的DOMready
        <div class="test">dom ready?</div>
    </body>
    <script>

    </script>
</html>
时间: 2024-08-11 01:16:53

jQuery的domReady的相关文章

jQuery中的domReady分析

我们都知道javascript中的window.onload方法的不足:必须等到所有图片和富文本媒体加载完后才能执行,影响用户体验.更好的做法是等到dom加载完即执行相应回调.类似jQuery中domReady方法应运而生. 在jQuery中用这个方法非常简便:$(function(){}),这个其实是$(document).ready(function(){})的简便写法,见到源码: rootjQuery = jQuery(document); if ( jQuery.isFunction(

requirejs加载css样式表

1. 在 https://github.com/guybedford/require-css 下载到require-css包 2. 把css.js或者css.min.js复制到项目的js目录下 3. 在require.config配置map map: { '*': { 'css': 'require/css' } } 4.配置css依赖: 直接在shim的deps节点配置需要的css文件 shim: { bootstrap: { deps: [ 'jquery', 'css!../../boot

Singal Page App:使用Knockout和RequireJS创建高度模块化的单页应用引擎

开篇扯淡 距离上一篇文章已经有好几个月,也不是没有时间记录点东西,主要是换了新的工作,在一家外资工作,目前的工作内容大多都是前端开发,新接触的东西因为时间原因,大多还不成体系,所以这么长时间什么都没记录下来,也正是因为新的工作内容,才有了今天这篇文章. 这篇文章是我自己的博客项目的前端重写,因为目前ASP.NET API和单页应用的流行,结合目前工作中用到的东西,我决定把我的博客项目的前端部分整个重写,(以前的就是一坨-) 步入正题 背景知识 RequireJS http://www.requi

requirejs搭建前端框架

1. 文件结构 2. base.js requirejs.config({     baseUrl: 'js',     paths:{         jquery:"../dist/js/jquery-1.11.3.min",         domReady:"../dist/js/domReady"     },     urlArgs: "version=" + version,     shim: {         'jquery'

JS补充

JS 由三部分组成:ECMAScript:也叫解释器,充当翻译角色,这是 JS 的核心部分. DOM:文档对象模型(Document Object Model).DOM 赋予了 JS 操作 HTML 的能力,即 document 操作. BOM:浏览器对象模型(Browser Object Model).BOM 赋予了 JS 操作浏览器的能力,即 window 操作. 变量的作用域:全局变量和局部变量.全局变量简单说就是在函数外声明的变量,任何地方都可以使用,而局部变量就是在函数内部声明的变量,

商务通代码

CSS代码: * html { background-image: url(about:blank); background-attachment: fixed; } body{height:1000px;} img{border:0;} #swt_c{ width:455px; height:333px; position:fixed; left:50%; top:50%; margin-left:-222px; margin-top:-165px; z-index:9999; display

本博客比较有价值的文章

源代码系列:underscore的封装和扩展http://www.cnblogs.com/samwu/p/4493456.html jQuery的封装和扩展方式http://www.cnblogs.com/samwu/p/4300381.html jQuery的Deferredhttp://www.cnblogs.com/samwu/p/4300394.html 模仿jQuery的Callbacks实现http://www.cnblogs.com/samwu/p/4287105.html jQu

jQuery domready

在jQuery里面,我们可以看到两种写法: $(function(){ //todo }) $(document).ready(function(){ //todo }) 这两个方法的效果都是一样的,都是在dom文档树加载完之后执行一个函数(注意,这里面的文档树加载完不代表全部文件加载完). window.onload是在dom文档树加载完和所有文件加载完之后执行一个函数.也就是说$(document).ready要比window.onload先执行. 模拟document添加一个ready函数

jquery如何实现domReady和onload判断的

function ready(fn) { var completed = function() { if ( document.addEventListener ) { document.removeEventListener( "DOMContentLoaded", completed, false ); window.removeEventListener( "load", completed, false ); } else { document.detach