等待 jQuery.html() 完全加载？答案

【问题标题】：Wait while jQuery.html() is fully loaded?等待 jQuery.html() 完全加载？
【发布时间】：2026-02-02 06:30:01
【问题描述】：

在 jQuery 中，我将一些 html 加载到这样的 div 中：

$("#test").html("Hello <img src='pic.jpg'>");

有没有办法知道 html 是否已完全加载？ 我的意思是我设置了内容，但是图像需要一段时间才能加载..我想等到整个 html 加载完毕...

我可以使用 $("img").load(... 但它不适用于 $.html 加载的内容还有其他想法吗？

谢谢

【问题讨论】：

您可以预加载（在 JS 中）图像并 onload 运行您的 jQuery。

标签： jquery

【解决方案1】：

本页尚未提及的另一个解决方案是使用 jQuery 的延迟对象，如下所示：

var rq_html = $.get('.../somepage.html');
var rq_img = $.get('.../img/someimg.jpg');

$.when(rq_html, rq_img).then(function() 
{
  // both requests completed, append received html into DOM
  // and either rely on cache or insert img manually
}, function()
{
  // this function is failure handler in case one of the requests fails
  // the other request may still be pending at this point,
  // you might want to cancel it or handle the situation in another way...
});

【讨论】：

【解决方案2】：

诀窍是在将<img> 对准文件之前设置事件侦听器：

$("#test").html ("Hello <img />");
var newImg = $("#test > img");

newImg.load( function () {
    alert ('Success!');
} ).attr ('src', 'pic.jpg');

See it in action at jsFiddle.

【讨论】：

【解决方案3】：

您可以使用 JS Image onload 处理程序并在那里添加标记：

$("#btn").click(function(){
    var img = new Image();
    alert('onclick');
    img.onload = function(){
        $("#mycontent").html("<img class='futureImg' src='http://upload.wikimedia.org/wikipedia/commons/6/67/Rita_25_sept_2005_1640Z.jpg'>");
         alert('onload');
    }
    $("#mycontent").html("Image loading...");
    img.src = 'http://upload.wikimedia.org/wikipedia/commons/6/67/Rita_25_sept_2005_1640Z.jpg';
});

http://jsfiddle.net/FPu4P/6/

注意，第一次打开后图片会缓存。这是一张相当大的图片，因此可能需要一两分钟才能加载。

编辑

而且，您实际上可以同时进行.html() 添加和 JS 缓存（据我所知）：

$("#btn").click(function(){
    // Just so the image is not cached
    var r = Math.floor(Math.random()*1111111111);
    var url = 'http://upload.wikimedia.org/wikipedia/commons/6/67/Rita_25_sept_2005_1640Z.jpg?'+r;
    var img = new Image();
    alert('onclick');
    img.onload = function(){
         alert('onload');
    }
    $("#mycontent").html("<img class='futureImg' src='"+url+"'>");
    img.src = url;
});

http://jsfiddle.net/FPu4P/7/

【讨论】：

【解决方案4】：

$("#test").html('Hello <img src="pic.jpg">').find('img').load(...)

【讨论】：

谢谢，但即使 img 没有加载它也会启动。我的意思是它可能已加载到内存中，但还不可见。

【解决方案5】：

试试：

$('#test').html("Hello <img src='pic.jpg'>").load(function(){
 // Ur task when it loaded.
});

【讨论】：

我在使用这个时得到Uncaught TypeError: e.indexOf is not a function at w.fn.init.w.fn.load。

【解决方案6】：

你为什么不使用.ready()？

文档：http://api.jquery.com/ready/

【讨论】：

【解决方案7】：

$("#test").load(function() {
    //your code after #test loaded
});

【讨论】：

【解决方案8】：

$("#test").html("Hello <img  class='futureImg' src='pic.jpg'>");

$(".futureImg").live('load',function () { alert('lalala');});

【讨论】：

我认为@Royi Namir 的回答更好:)
jsFiddle 不是纯开发环境。此语句也不起作用，它应该 $('body').load(function () { alert('lalala');}); jsfiddle.net/FPu4P/4