ded / domready Goto Github PK

lets you know when the dom is ready

License: MIT License

Makefile 0.89% JavaScript 81.56% HTML 17.55%

domready's Introduction

domReady

It's easy. Works like this:

domready(function () {
  // dom is loaded!
})

Deprecation Notice

Compatibility with IE6, IE7, and IE8 has been fully dropped. If your application requires this level of support, please use the 0.3.0 release.

Browser support

IE9+
Firefox 4+
Safari 3+
Chrome *
Opera *

Building

npm install
make
open tests/test.html

Including with Ender

Don't already have Ender? Install it like this:

npm install ender -g

Include domready in your package:

ender add domready

Then use it like this

require('domready')(function () {
  $('body').html('<p>boosh</p>')
})

// or

$(document).ready(function () {
  $('body').html('<p>boosh</p>')
})

domready's People

Contributors

Stargazers

Watchers

Forkers

pergher jatr chanian droot amccollum tellnes wondger ignovak wrapter davidohalloran r4j4h magicapple formwatcher johnyy a-sk juliangruber watcherdm timoxley erinther afreeland jb55 gerhobbelt danjarvis shakakira responsiveapp walski doctyper spil-stephanep urbansurfer saiga19 idflood kevinvandijk dequelabs eterneige f2er bobtherobot caishuai benlynchnz koopreynders stevehlm web5design jalbini dhanapal8k arturocr shengtao gockxml john2496 shimscharf imhu hunterloftis ahdinosaur patik botweb dcorb naijaruns danielkcz iulyus elidupuis solinx charlie8230 cybernetics spatineo imsobear fteam thibaudcolas kayleung camwest mattdesl androwsaeed robloach debingfeng modulexcite rachitman wpsmith x710894881 jdbonicel niiknow allenweb infrajs khaledelansari sherpic guon phineco tyhyly jaanek xdushepherd venliong liangklfang robinnorth ramsesgz arquivo1 anthonybrown xorosamin pedrorochaorg gramorris osartun geekwolverine hakmao colvir jungjoo

domready's Issues

What license is this under?

async/sync invocation of domready handlers is inconsistent

Assuming the standard scenario where an event handler is registered prior the the document being ready, the handlers are (as intended) fired asynchronously.

However, when a domready handler is registered after the document is already ready, it is executed synchronously. This makes usage of this library unpredictable and inconsistent. It's generally recommended (I daresay best practice; but what a loaded phrase) that callbacks that may be invoked asynchronously should always be executed asynchronously.

I propose any handlers registered after domready should be invoked via process.nextTick in node or setTimeout(fn, 0).

I'm more than happy to submit a PR if the change will be accepted.

Domready breaks if called during "interactive" readyState

Load the domready library when the document readyState is "interactive"
Immediately call domready(callback) when the document is still in "interactive" state
Callback is never executed

Domready assumes that the DOMContentLoaded event will be fired when the document transitions from interactive to complete.

However, DOMContentLoaded won't fire again after the document is in interactive mode. This results in the domready callback never executing (loaded is false, and DOMContentLoaded never fires).

Looks like the hack in @theodoreb's pull request would fix this (at least for Chrome, not sure if it would work 100% in IE).

Inconsistent order of module definition fallbacks.

domready/ready.js

if (typeof define == 'function') define(definition)
else if (typeof module != 'undefined') module.exports = definition()
else this[name] = this['domReady'] = definition()

domready/src/ready.js

if (typeof module != 'undefined') module.exports = definition()
else if (typeof define == 'function' && typeof define.amd == 'object') define(definition)
else this[name] = definition()

I would suggest committing to using one or the other. I would also suggest including the define.amd check to ensure the define is an AMD implementation.

Apostrophe in description

The description of this github project reads: "let's you know when the dom is ready". There should not be an apostrophe in "lets".

tag 0.2.11

any chance you could tag 0.2.11? i'd like to lock the version i'm using via component (component install ded/[email protected]).

All JavaScript breaks if an HTML id="module" is in the markup

Problem/Motivation
All JavaScript breaks if an HTML id="module" is in the markup.

This issue was stumbled across in Drupal.
The issue for it is located at: https://www.drupal.org/project/drupal/issues/2961308

I have tested it in IE 11, Edge, and Chrome.

I believe it might be in issue in drupal because domready is loaded with the rest of the javascript at the bottom of the document.

Here is the amended test that fails.

<!DOCTYPE HTML>
<html lang="en-us">
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title id="module">domReady test</title>
    <script src="../src/ready.js"></script>
    <script type="text/javascript">
      domready(function () {
        document.getElementById('title').innerHTML = 'domready'
        domready(function () {
          document.getElementById('title').innerHTML += '✓'
        })
      })
    </script>
  </head>
  <body>
    <h1 id="title"></h1>
  </body>
</html>

Release next version

Wondering if the next version could be released?

Mainly after getting a offical version with this PR in #55

hack to support $(function() {}) shorthand

OK, while this could go into the Ender bridge for domready I'm suspecting that it may be deemed unnecessary so I'm happy for you to close this ticket without action. I'm just putting it here for the record in case someone else finds it useful.

To get someone else's jQuery plugin working with Ender without modifying their code, I've put the following hack in prior to the plugin code. It's for where of $(function() {}) is used as a shorthand for $(document).ready(function() {}).

ender = function() {
  return (arguments.length && typeof arguments[0] == 'function' ?
    enderOrig.domReady : enderOrig).apply(this, arguments)
}
for (p in enderOrig) ender[p] = enderOrig[p]
// this line is only required if $(function(){}) is required outside this Ender build file
// although a $=ender may be required depending on how it's invoked in the local scope
window['$'] === enderOrig && (window['$'] = ender)

Fake DOM ready in NodeJS environment

I think this is necessary for tests. For now I am running tests using test'em utility which essentially runs tests in the browser. However when I deploy tests to the CI, my test fails.

It would be nice to incorporate detection of the environment and in case of Node just skip all the document stuff and just use process.nextTick to call attached callbacks.

!function (context, doc) { ... ??

Hi, was wondering why there was an exclamation mark (!) in front of the anonymous function declaration. Seems like a typo. JS validation also complains about this.

Please add a bower.json with a "main"

It's possible to install this with bower straight from GitHub but the bower.json then would be:

{
  "name": "domready",
  "homepage": "https://github.com/ded/domready",
  "version": "1.0.5",
  "_release": "1.0.5",
  "_resolution": {
    "type": "version",
    "tag": "v1.0.5",
    "commit": "45fc341b179a5fa6d7ecda5f90e0138847cbd56e"
  },
  "_source": "git://github.com/ded/domready.git",
  "_target": "*",
  "_originalSource": "domready"
}

No main, which is handy for things like main-bower-files.

Error on android Webview

DomReady worked before the webview on Android 4.4 ,But not work for Android 5+

bower.json

hi,

can you add your git repro to bower? i manage my dependencies over bower.

readyState regex is wrong

The following regex passes when the document state contains a c but does not start with one, one example is IE's interactive state.

loaded = /^loade|c/.test(doc[readyState])

it should probably be changed to:

loaded = /^loade|^c/.test(doc[readyState])

Change title on the readme?

The readme is headed with domReady, but everywhere else it's just domready (the npm package name, the global it exports, and everywhere else in the docs)

It does not work with jsdom

Even when requiring jsdom, domready() fails:

xxxxxxnode_modules/domready/ready.js:13
    , doc = document
            ^
ReferenceError: document is not defined

I use jsdom as follows:

var jsdom = require('jsdom').jsdom;

// Define global.window.
global.window = jsdom(undefined).parentWindow;

This is enough to make jQuery happy under Node (you can run $("any-selector"), but still makes domready() to fail.

Does domready expect a global document object? Can it be mitigated to work when jsdom is load?

Fails on Opera 9

Hi,

It doesn't seem to work properly on Opera 9, DOM elements are not available yet on my nut unit tests first block.

Cheers

Should there be a semi colon at the end of the file?

I'm using your awesome script! :-)

When I use it with another script directly after it, I get a syntax error in the other script. I chucked a semi colon on the end of your script and it fixed the problem.

I noticed many other scripts come with a semi colon on the end of the file.

Thanks for the great script.

Does not work in IE10

Hello, your library doesn't work in IE10

Doesn't work for server-side rendering

I have an app that uses SSR, but the domready package didn't work as document isn't defined on the server. That's why it fails on line 13:

    , doc = document

Instead it should check if document is defined.

module.exports

I know you would never use this on the server... but i'd love to be able to do require('domready') with the new ender require stuff... and keep the global namespace cllleannnn. :D

wiredep doesn't want to inject domready

Hello :)

I'm using the webapp generator from Yeoman and this is what I get when I'm trying to make the build :

Running "wiredep:app" (wiredep) task
app/index.html modified.

domready was not injected in your file.
Please go take a look in "/Users/Nicolas/Sites/project/bower_components/domready" for the file you need, then manually include it in your file.

So I have to do this in my index.html :

<!-- build:js(.) scripts/vendor.js -->
<script src="bower_components/domready/ready.js"></script>
<!-- bower:js -->
<!-- endbower -->
<!-- endbuild -->

After compiling this is what I get :

<!-- build:js(.) scripts/vendor.js -->
<script src="bower_components/domready/ready.js"></script>
<!-- bower:js -->
<script src="bower_components/bonzo/bonzo.js"></script>
<script src="bower_components/bean/bean.js"></script>
<script src="bower_components/reqwest/reqwest.js"></script>
<script src="bower_components/fastclick/lib/fastclick.js"></script>
<!-- endbower -->
<!-- endbuild -->

If I don't add it manually, domReady is not injected automatically like the others between the bower:js tags.

FYI this is my bower.json :

  "dependencies": {
    "modernizr": "~2.8.3",
    "domready": "~1.0.7",
    "bonzo": "~2.0.0",
    "bean": "~1.0.14",
    "reqwest": "~1.1.4",
    "fastclick": "~1.0.3"
  },

Is something missing or did I do something wrong?

XP is still supported until April 2014, XP malware and maybe other stuff until 2015 so I still expect to get IE8 users in the next few years with my current client projects.

I suppose by reading the tweet from https://twitter.com/ender/status/434784161568538624 there is a news somewhere about dropping support for IE8 and below but I didn't catch it :-/ Any place to stay tuned ?

Thank you :-)

Update licence on NPM

NPM currently displays "none" licence