我对 jquery 的负载感到困惑答案

【问题标题】：i feel confused with jquery's load我对 jquery 的负载感到困惑
【发布时间】：2023-03-09 00:04:01
【问题描述】：

使用 jquery，我怎么能在加载 dom 后做一些事情，我这样写：

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

但是什么也没发生~ 如果我使用 ready() 而不是像这样加载：

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

，可以，但是指针"this"不会是$("#google")，而且好像是"window"之类的东西，感觉很迷茫~

【问题讨论】：

您能否告诉我们该图像是动态生成的还是在您的 html 中硬编码的？
它是硬编码的，我想要的是在加载 dom 后该函数工作~不是所有的文档 dom 树都加载，因为有时 dom 树太大了~

标签： jquery dom load this ready

【解决方案1】：

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

.load() 用于发出 ajax 请求。你应该阅读它here

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

哦，在您的第二个示例中，您不能使用alert(this)。 alert() 只是将字符串作为参数。

【讨论】：

@wong2 事情是他没有准确描述图像是如何进入这一切的......编辑：我刚刚问过他。
@David：我问的原因是，如果他从 Firebug 或 Web Inspector 获取代码；）但是，是的，图像已经存在于代码中是有道理的。
我从 jquery 的网站：api.jquery.com/load-event 学习了加载事件，它可以在许多 dom 中使用“这个事件可以发送到与 URL 关联的任何元素：图像、脚本、框架、iframe、和窗口对象。”我想要的是 dom 加载后的功能工作
@Dafims，您并没有天生就使用错了，只是在您的特定场景中，您似乎不需要它。
@Guy Fawkes ,TX 我用 $(document).ready 解决了所有 dom 加载的问题，所以我想知道一些特殊的 dom 加载后是否有一些方法可以工作~

【解决方案2】：

在您的第一个代码中，您正在查看一个 #google 元素，并告诉它在加载其图像时通知您。但是，在执行 javascript 时（元素上方，在代码中），exists 没有 #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>

Working example

如果您对在代码中间注入这样的脚本块不满意，但想稍后将脚本推迟到某个地方，您可以随时收听$(window).load() 而不是$('#google').load()。这相当于<body onload="">，即它会在 all 外部内容已加载时运行。所以当$(window).load() 发生时，您知道您的#google 图像已经加载，但不能保证在加载后立即。

【讨论】：

在 jsbin 中有效，但在 jsfiddle 中无效，这是因为您必须在之后立即添加。我觉得不好看..
TX~我工作~按照你的想法，我想知道jquery的实时事件是否会作为它的描述：将一个处理程序附加到与当前选择器匹配的所有元素的事件，现在和在未来。但似乎

【解决方案3】：

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

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

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

【讨论】：

如果你使用这种方法，一个安全的做法是让图像最初指向一个透明像素或类似的东西，因为一些浏览器会解释一个省略的src，就像他们解释的那样没有action 的form，即作为对自身的引用，并导致对图像所在页面的第二次请求。如果您在该页面上执行服务器端脚本，这可能会导致一些奇怪的事情。如果您从一开始就引用了一个透明像素，您最好检查一下您的load 侦听器，以确认它不是被触发的那个图像。
我似乎在 $(window).loaded 之后可以这样工作： $(window).load(function(){ $('#google').bind("load", function( ) { alert('ok');});$("#google").attr("src", "google.com/images/logos/ps_logo2.png"); }); 我认为这将是解决负载问题的好方法，通过动态添加属性~TX

【解决方案4】：

试试这个：

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

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

【讨论】：

【解决方案5】：

只需使用以下内容：

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

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

【讨论】：

据我所知，"$(document).ready" 将在所有 dom 加载后工作，我想要的是在 "#google" dom 加载后，有时我们有一个大的 html 文件，我们想要加载一些 dom 后脚本工作~