我对 jquery 的负载感到困惑

Question

使用jquery，我如何在dom加载后做一些事情，我这样写：

<script>
$("#google").load(function() {
  alert('ok');
});
</script>
<img src="http://www.google.com/images/logos/ps_logo2.png" id="google" />

但什么也没发生~ 如果我使用ready()而不是这样的load:，

 <script>
    $("#google").ready(function() {
      alert(this);
      alert('ok');
    });
    </script>
    <img src="http://www.google.com/images/logos/ps_logo2.png" id="google" />

它会工作，但是指针“this”不会是$(“#google”)，它似乎是“窗口”或其他东西，我感到困惑〜

Answer 1

如果我理解正确的话，你想在 DOM 完全加载后操作#google。那么你要使用的其实是 $(document).ready(function() {//do stuff with #google});

.load() 用来发出 ajax 请求。您应该在此处阅读它。

了解 #google 是否是动态生成的也很有趣。

哦，在你的第二个例子中，你不能执行alert(this)。 alert() 仅接受一个字符串作为参数。

Answer 2

在您的第一个代码中，您正在查找一个 #google 元素，并告诉它在加载图像时通知您。但是，在执行 javascript 时（代码中的元素上方），不存在 #google 元素，所以事件监听器没有分配给任何东西。

遗憾的是，在 DOMReady 侦听器中添加事件侦听器也并不总能解决问题。例如，如果图像已在浏览器缓存中，则 #google 加载事件可能会在 DOMReady 之前发生。最安全的方法似乎是在创建图像后立即附加侦听器。

<img src="http://www.google.com/images/logos/ps_logo2.png" id="google" />
<script type="text/javascript">

$('#google').load(function() {
   alert('ok');
});

</script>

工作示例

如果您不满意在代码中间注入脚本块，但是如果您想将脚本推迟到稍后的某个地方，您可以随时监听 $(window).load() 而不是 $('#google').load()。这相当于，即当所有外部内容加载完毕时它将运行。因此，当 $(window).load() 发生时，您知道您的 #google 图片已加载，但不能保证立即加载后。

Answer 3

您应该首先将事件处理程序绑定到加载事件，然后设置图像的 src 以实际启动加载。

$('#google').bind("load", function() {
    alert('ok');
});
$("#google").attr("src", "http://www.google.com/images/logos/ps_logo2.png");

看到这个： http://jsfiddle.net/VaLhf/

Answer 4

尝试这样做：

$(function() {
    var that = $("#google");
    alert(that);
});

此代码将在 DOM 完全加载时运行，由 $(document) ready() 事件。

Answer 5

只需使用以下内容：

$(document).ready(function() {
   alert("The DOM has loaded");
});

.load 函数用于触发 ajax 调用并将响应放置在指定的 div 中。