标签: document-ready

HTML元素显示早于onload或document.ready被触发.

所有jQuery UI小部件都加载到document.ready上,它使页面看起来很难看,只需几秒钟.

处理它的可能选项 - 在使用jQuery UI进行拉伸之前隐藏元素,并在加载后用JS显示它们.但是如果JS被关闭 - 用户将看不到标准HTML和jQuery UI的任何元素.

使用它的最佳做法是什么？

以下jQuery代码段的最终结果是否相同？

小片1:

$(function() { alert('test!'); });

摘录2:

$(document).ready(function() { alert('test!'); });

换句话说,$(function(){})只是简写$(document).ready(function() { });？

我问的原因是因为我们在使用jQuery和jQuery UI构建的小应用程序中看到了一些奇怪的问题.有时,通过单击按钮执行表单提交操作时,浏览器窗口将冻结.我们仍然可以使用底层浏览器窗口(启动弹出窗口的窗口),直到我们在那里执行某些操作.用户只能通过强制关闭浏览器(显然是Internet Explorer)继续.我们怀疑这与Acrobat PDF插件有关,但我只是在这里查看所有角度,因为我发现这个问题似乎表现出类似的行为.

我想在浏览器请求之前更改图像的src属性,目的是使用像Timthumb这样的PHP脚本来减小图像的大小.使用jQuery,我认为$(document).ready可以做到这一点:

$(document).ready(function () {
  var imgs = $('#container img');
  jQuery.each(imgs, function() {
    $(this).replaceWith('<img src="timthumb/timthumb.php?src=' + $(this).attr('src') + '&w=200" />');
    });
});

但原始的,未显示的图像仍然在后台下载到浏览器的缓存中.是否有可能在客户端做我想做的事情,或者服务器端是唯一的选择？

我有一个<ul>动态生成<li>元素的元素,只是想运行一个onclick事件

<ul id="results">
    <li class="device_result searchterm" data-url="apple-iphone-5s">
        <a href="#"> Apple iPhone 5s </a>
    </li>
    <li class="device_result searchterm" data-url="apple-iphone-5c">
        <a href="#"> Apple iPhone 5s </a>
    </li>
</ul>

我在一个$(document).ready块中有以下jQuery,但它似乎不起作用 - 任何想法我做错了什么？

$("li .searchterm").click(function() {  
    console.log("testing");
});

我正在努力使用Browserify和文档就绪事件.如何创建一个模块,用于导出仅在文档就绪事件触发后可用的内容？我如何依赖这样的模块？

我的第一个尝试是尝试异步设置module.exports - 开箱即用.我的下一个问题就是模块返回一个接受回调的函数,并在文件准备好时触发调用.第三次尝试回复了承诺.这似乎使依赖模块不是非常模块化的,因为现在依赖的模块及其依赖性(以及它们,乌龟一直向下)也必须利用这种模式.

使用Browserify和文档就绪事件有什么好的模式？

我正在使用PHP脚本中的选项卡构建一个jQuery对话框.该脚本在循环内使用'include'指令,迭代选项卡并包含其他脚本.每个包含的文件都有选项卡的数据和一个带有jQuery document.ready()函数的<script>标记.没有循环,它基本上这样做:

<div id="tabDialog">
  <div id="tabs">
    <ul>
      <li><a href="#tab1'>Tab1</a></li>
      <li><a href="#tab2'>Tab2</a></li>
    </ul>
    <div id="tabContainer">
      <div id="tab1">
        <?php include "tab1.php"; ?>
      </div>
      <div id="tab2">
        <?php include "tab2.php"; ?>
      </div>
    </div>
  </div>
</div>

例如,tab1.php可能具有以下内容:

<script type="text/javascript">
   $(document).ready (function () {
       alert ('tab1 loaded');
   });
</script>

问题是,在使用<div id ="dialog">作为对话框的DIV创建和打开对话框时,第二次调用文档的就绪函数.这是对话框代码:

 $("#tabDialog").dialog ({
   autoOpen: false,
   minWidth: 450,
   minHeight: 400,
   width: 600,
   height: 500
 }).dialog ('open');

造成这种情况的原因是什么,以及解决这种情况的最佳方法是什么？我试图将每个选项卡的功能保存在单独的文件中,因为它们可以在多种情况下使用,而且我不必复制与它们关联的代码.

感谢您的帮助或建议.

我已将多个文件中的多个函数附加到$(document).ready,并希望在它们之前附加一个函数作为$(document).ready处理的第一个函数或者在$(document)之前独立触发的函数.ready处理程序.

有没有办法处理jQuery在jQuery.fn.ready中内部触发的函数的顺序,或挂钩在jQuery.fn.ready之前调用的函数.

在第三方脚本中编辑jQuery.fn.ready是安全的,或者它会在其他第三方插件中引起可怕的敲击效果(除了编辑jQuery.fn.ready本身的插件)

[编辑]:

举个例子

$(document).ready(function b() {});
....
$(document).ready(function a() {/* optional setup*/});
....
$(document).ready(function c() {});

函数a首先需要与订单无关,但只能在几页上调用.我不能保证b或c的顺序,所以我不能在b或c的开头触发自定义事件来触发a.

所以我想要一个通用的解决方案,我可以用它来强制放置一个jQuery的内部readyList或挂钩到jQuery的ready函数的开头并安全地编辑它,所以它在readyList中的任何其他函数之前调用它.

[进一步编辑]

如果可能的话,我宁愿不必重新设计javascript代码执行顺序,或者除了函数a()之外还必须触及任何其他代码.我知道重组可以让我解决这个问题,但我宁愿只写一个函数

$.beforeReady(function a() {});

我用下面的代码有相同的高度rightpos,leftpos并middlepos申报单:

<script>

    jQuery.noConflict();
    jQuery(document).ready(function($){

        // Find the greatest height:
        maxHeight = Math.max($('#rightpos').height(), $('#middlepos').height());
        maxHeight = Math.max(maxHeight, $('#leftpos').height());

        // Set height:
        $('#rightpos').height(maxHeight);
        $('#middlepos').height(maxHeight);
        $('#leftpos').height(maxHeight);

    })
</script>

使用这种方式为http://yaskawa.ir/的主页确定最高的div 在Firefox中运行良好,但在Chrome中有问题.

Sparky672回答后更新1:

我可以看到,使用此代码,alert('test here');最后不起作用.

<script>
    jQuery.noConflict();
    //jQuery(document).ready(function($){});

    jQuery(window).load(function($){

        // Find the greatest height:
        maxHeight = Math.max($('#rightpos').height(), $('#middlepos').height());
        maxHeight = Math.max(maxHeight, $('#leftpos').height());

        // Set height:
        $('#rightpos').height(maxHeight);
        $('#middlepos').height(maxHeight);
        $('#leftpos').height(maxHeight);

        alert('test here');
    })
</script>

如此线程中所述:window.onload vs $(document).ready().本window.onload应在随后发生的比$(document).ready(),但在这个简单的代码,日志会表明,onload事件发生ready事件之前执行？我在这里想念的是什么？

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>

<body>
  <h1>A Simple Site</h1>
  <script>
    $(document).ready(function() {
      console.log("ready event fired");
    })
     window.onload = function() {
      console.log("onload event fired");
    }
  </script>
</body>

</html>

我正在使用一个遵循MVC模式的Web应用程序框架(Symfony 1.3.6).

视图层由模板装饰器组成.模板文件还可能包含其他模板 - 这就是我的问题所在.

假设有一个页面(让我们称之为'主页'),它由几个模板组成 - (代码已经重构,因此'子模板'可以在其他页面上使用.

作为重构的结果,主模板使用的小模板(在我们的示例中为"主页")需要包含与jQuery相关的代码.

让我们说主页模板使用2'子模板:

• 模板A.
• 模板B.

假设模板A包含以下代码段:

<div id="field1">This is field 1</div>
<script type="text/javascript">
$(document).ready(function(){
   $('#field1').click(function(){
      alert('Field 1 clicked!');
   });
</div>
</script>

假设模板B包含以下代码段:

<div id="field2">This is field 2</div>
<script type="text/javascript">
$(document).ready(function(){
   $('#field2').click(function(){
      alert('Field 2 clicked!');
   });
</div>
</script>

现在模板'主页'看起来像这样:

<html>
  <head>
    <title>Multiple jQuery snippet test</title>
    <script src="path_to_jquery"></script>
 </head>
 <body>
   <div>include_template('template A')</div>
   <div>include_template('template B')</div>
 </body>
</html>

我试过这个 - 并且令我惊讶的是,它在合并的最终页面('主页)中只有一个$(文档).ready().

我不确定我的浏览器(Firefox)或Web框架(Symfony)是否在幕后做了一些'清理'.

所以我的问题是,如果你想将jQuery功能重构为'可重复使用的小模板',可以重复使用以在不同的页面中提供相同的功能,那么最好的方法是什么？

顺便说一下,我希望没有人建议写一个jQuery插件,因为那不是我所说的.