个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
在我的应用程序中，当我使用 require (来自 RequireJS)时， domReady 事件会触发实际上是加载事件的事件(当所有图像、脚本等完成加载时)。这是预期的吗？
我有一堆使用 document.ready (来自 jQuery)的代码，但它无法正常运行，因为 domReady 事件触发得很晚。我编写了一个示例脚本来显示我面临的问题。
<html>
<head>
</head>
<body>
<script type="text/javascript" src="http://ratel.apache-extras.org.codespot.com/svn-history/r6/trunk/ratel/web/js/lib/require.js"></script>
<script>
require.config({
paths: {
"jquery": '//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min',
"jquery.validate": '//ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min'
},
shim: {
"jquery.validate": ["jquery"]
}
});
require(["jquery"], function (){
$(document).ready(function(){
console.log("the document is ready");
});
});
</script>
<img src="http://ie.microsoft.com/testdrive/HTML5/DOMContentLoaded/whidbey.jpg" width="300" height="300">
</body>
</html>
此 HTML 示例加载一个非常大的图像。我希望 $(document).ready 中的代码会在加载 jQuery 后立即触发。但它仅在大图像下载完成后才会触发。
我在这里做错了什么？
最佳答案
使用以下jsfiddle test ，这会将监听器附加到 window.DOMContentLoaded , window.load , $()和require["domReady!] :
<script>
// IE patch
if (Function.prototype.bind && window.console && typeof console.log == "object") {
["log","info","warn","error","assert","dir","clear","profile","profileEnd"].forEach(function (method) {
console[method] = this.bind(console[method], console);
}, Function.prototype.call);
}
startTime = +new Date();
require = {
paths: {
"domReady": "https://rawgithub.com/requirejs/domReady/2.0.1/domReady",
"jquery": "http://code.jquery.com/jquery-1.10.2.min"
},
waitSeconds: 60
};
</script>
<script src="http://requirejs.org/docs/release/2.1.8/minified/require.js"></script>
<script>
function log() {
var args = Array.prototype.slice.apply(arguments);
var evt = args[0];
var type = evt && evt.type;
args = [+new Date() - startTime + "ms", type].concat(args);
console.log.apply(console, args);
}
require(["jquery"], function($) {
$(log("jquery.ready"));
});
require(["domReady!"], log);
window.addEventListener('load', log, false);
window.addEventListener('DOMContentLoaded', log, false);
</script>
<img id="theImg" src="http://ie.microsoft.com/testdrive/HTML5/DOMContentLoaded/whidbey.jpg" width="300" height="300">
<script>
var theImg = document.getElementById("theImg");
log("I am the trailing script and this is the image", theImg, theImg.id, theImg.parentNode, theImg.nextSibling);
</script>
我得到这些结果(FF 23、Chrome 29、IE 9):
FF 清理缓存。
[22:08:47.477] "488ms" undefined "I am the trailing script and this is the image" [object HTMLImageElement] "theImg" [object HTMLBodyElement] [object Text]
[22:08:47.478] "489ms" "DOMContentLoaded" [object Event]
[22:08:47.838] "849ms" undefined "jquery.ready"
[22:09:00.770] "13781ms" "load" [object Event]
[22:09:00.773] "13783ms" undefined [object HTMLDocument]
FF 启动缓存。
[22:09:19.881] "3ms" undefined "I am the trailing script and this is the image" [object HTMLImageElement] "theImg" [object HTMLBodyElement] [object Text]
[22:09:19.881] "3ms" "DOMContentLoaded" [object Event]
[22:09:19.883] "5ms" "load" [object Event]
[22:09:19.908] "30ms" undefined "jquery.ready"
[22:09:20.176] "298ms" undefined [object HTMLDocument]
Chrome 清理缓存。
745ms undefined I am the trailing script and this is the image <img id=?"theImg" src=?"http:?/?/?ie.microsoft.com/?testdrive/?HTML5/?DOMContentLoaded/?whidbey.jpg" width=?"300" height=?"300">? theImg <body>?…?</body>? #text
751ms DOMContentLoaded Event {clipboardData: undefined, cancelBubble: false, returnValue: true, srcElement: document, defaultPrevented: false…}
2024ms undefined jquery.ready fiddle.jshell.net/fiddlegrimbo/QrUxr/17/show/:53
16105ms load Event {clipboardData: undefined, cancelBubble: false, returnValue: true, srcElement: document, defaultPrevented: false…}
16127ms undefined #document
Chrome 启动缓存。
503ms undefined I am the trailing script and this is the image <img id=?"theImg" src=?"http:?/?/?ie.microsoft.com/?testdrive/?HTML5/?DOMContentLoaded/?whidbey.jpg" width=?"300" height=?"300">? theImg <body>?…?</body>? #text
508ms DOMContentLoaded Event {clipboardData: undefined, cancelBubble: false, returnValue: true, srcElement: document, defaultPrevented: false…}
1211ms undefined jquery.ready fiddle.jshell.net/fiddlegrimbo/QrUxr/17/show/:53
14952ms load Event {clipboardData: undefined, cancelBubble: false, returnValue: true, srcElement: document, defaultPrevented: false…}
14953ms undefined #document
IE 清理缓存。
LOG: 363msundefinedI am the trailing script and this is the image[object HTMLImageElement]theImg[object HTMLBodyElement][object Text]
LOG: 364msDOMContentLoaded[object Event]
LOG: 1171msundefinedjquery.ready
LOG: 13743msload[object Event]
LOG: 13747msundefined[object Document]
IE 启动缓存。
LOG: 6msundefinedI am the trailing script and this is the image[object HTMLImageElement]theImg[object HTMLBodyElement][object Text]
LOG: 126msDOMContentLoaded[object Event]
LOG: 128msload[object Event]
LOG: 164msundefinedjquery.ready
LOG: 416msundefined[object Document]
因此，当缓存干净时，FF、Chrome 和 IE 中的回调顺序是相同的:
但是当缓存启动时，IE 的顺序会发生变化。 FF 和 Chrome 保持不变。
而且 FF 和 IE 似乎第二次运行得快得多。尽管缓存已准备就绪，但 Chrome 的延迟似乎大致相同。
如果有必要，您必须执行自己的测试，因为我只运行了几次。所以我并不是说这是一致的行为(尽管可能是)。
您当然可以忽略所有这些回调，只需在 </body> 内的页面末尾添加一个脚本 block 即可。标签。脚本 block 上方的所有 DOM 元素都应可用于某些操作。同样，您必须测试您的特定页面/网站。
关于jquery - domReady 似乎在 RequireJS 中启动较晚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18690831/
25
4
0
如何使用 requirejs 导入 recaptcha。我已经尝试了几件事，但没有任何效果。 我需要这样做，以便能够在加载后使用 reCaptcha 的渲染方法自行渲染它。 require.confi
我正在尝试将 OpenLayers 库与 RequireJS 一起使用。 问题是，OpenLayers 一直处于“未定义”状态，即使它被列为我的模块的唯一依赖项: define(['OpenLayer
我正在尝试使用 gulp-requirejs构建一个演示项目。我希望结果是一个包含所有 js 依赖项和模板的单个文件。这是我的 gulpfile.js var gulp = require('gulp
没有 Require.js 就可以在浏览器控制台中调用全局对象，例如 app app.movies 当我将代码包装在 RequireJS 模块中时，如何在浏览器控制台中访问模块中的数据？我会发现这有助
这个问题有 3 个部分。我有两个模块 a 和 b。 如何在最初需要 b 后重新定义它？ 如果 a 依赖于 b，我该如何更新 a 以使用新的 b？ 如何找到所有依赖于 b 的模块并更新它们？ 例如；
我正在尝试找到一种将 Backbone-relational 子模型与 RequireJS 一起使用的方法，其中子模型与 super 模型位于不同的文件中。 例如: // app.js define(
使用 require.js (r.js) 优化 js 代码时，将所有 js 源代码复制到目标目录(dir 属性)。 有没有办法(一些配置)来防止 requirejs 复制源文件？ 最佳答案 如果添加
main.js 文件中的代码如下: phantom.injectJs("libs/require-1.0.7.js"); require.config( {
我在 require-config.js 中配置了一些路径，如下所示: var require = { baseUrl: '/javascript', paths: {
我正在重构一个大型 javascript 代码库以使用 RequireJS。不幸的是，我正在处理的许多文件都不是面向对象的，并且在不进行重大修改的情况下无法返回对象。是否有更有效的方法让“依赖”模块访
我是 RequireJS 的新手，我对加载顺序感到困惑。 我有一个全局项目配置，需要在位于 js/app/* 的模块之前加载。 这是我的结构: index.html config.js js/
我已经使用 requireJS 设置了一个 Angular 应用程序。在部署之前，我将所有内容捆绑到一个唯一的文件中。通常，外部库没有 requireJS“定义”包装器。 例如Angular Para
假设我有一个如下所示的模块: define(['jquery', 'actions', 'util', 'text!../templates/dialog.html!strip', 'text!../
如何使用 grunt-contrib-requirejs配置或什至r.js Config不缩小特定文件。 我可以使用optimize: 'none'选项禁用所有文件的缩小。但我不知道如何对单个文件禁用
好吧，我已经知道你应该像这样使用 RequireJS 配置路径 require.config({ paths: { name: 'value' } }); 并这样调用它。 requir
我希望能够有选择地定义一个模块，然后在我的代码中使用或不使用它。我正在考虑的特殊情况是在调试/测试环境中加载模拟/ stub 模块，但不是在我上线时加载。这是示例: 在 html 文件中，可以选择加载
我为构建过程创建了一个任务，其中 requirejs 作为它的子任务之一，并且在 requirejs 之后几乎没有其他任务。该任务在运行 requirejs 后停止，即使使用详细信息也不会抛出错误。任
我想创建一个可以从我的 RequireJS 项目中的任何模块访问的变量。 例如，在初始化时我想设置: this.myVar = 123; 并且能够在我的 RequireJS 项目内部(但不是外部)的任
我正在使用 TypeScript、Backbone 和 Mustache 编写网络应用程序。我想使用 Requirejs 进行依赖加载。 我还在使用 TypeScript 的 Web Essentia
我正在尝试创建一个节点样板，并尝试创建一个任务来运行 Jasmine 测试。我的 Gruntfile.js 中有以下配置: jasmine: { src : ['static/test/spec/
我是一名优秀的程序员,十分优秀！