jquery html() 回调函数答案

【问题标题】：jquery html() callback functionjquery html() 回调函数
【发布时间】：2012-05-05 06:11:49
【问题描述】：

这个问题已被问过几次，但没有以可以帮助我解决具体问题的方式回答。从导航列表中，单击某个项目时，我正在使用 .html() 函数将一些 HTML 内容加载到 div 中。没有ajax请求。 HTML 内容包含图像。因此，加载可能需要一些时间。而且由于.html()是同步操作，所以下一行会立即执行。

一旦我使用.html() 加载内容，我就会启用一个名为 tinyscrollbar 的第三方自定义滚动条。如果加载的内容有图像，则滚动条会在加载图像之前计算内容 div 的高度，从而导致滚动条不会一直滚动。

我不想使用.setInterval()。有解决方案吗？ jQuery 中是否还有其他函数类似于 .html() 函数但具有某种回调功能？

谢谢。

【问题讨论】：

您可以确定内容中有多少张图片，然后监听它们的加载事件
您是否尝试在每个图像标签上定义设置的宽度和高度？即使图像尚未加载，如果滚动条知道图像高度，它也应该能够正确计算高度。
$(document).ready 在等待图像后会不起作用吗？
robinson 评论似乎是正确的答案。您可以简单地使用 $("#mydiv img") 之类的内容迭代图像。
@MatthewRiches $(document).ready 不起作用，因为它不等待图像和 css 完成加载。

标签： jquery html image

【解决方案1】：

$('#divId').html(someText).promise().done(function(){
    //your callback logic / code here
});

【讨论】：

小心链接到（我假设）你的博客，几乎没有其他信息，比如你的类似答案here。它可以被视为垃圾邮件。
最好使用then()，而不是done()，这样更符合标准的JavaScript Promise对象：developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
这个答案具有误导性。 .html() 是同步的。 .promise().done() 不等待 .html() 方法完成。相反，它只是在事件循环的下一个滴答声中运行回调，类似于使用setTimeout(yourLogicFunction, 0) 时会发生的情况。它可能会“工作”，但不会等待 .html() 完成。
@Deb 这个调用记录在官方 API 文档中，因为我一直在寻找这个，因为我担心浏览器兼容性。
这是链接，在 cmets 中受到关注，发现粘贴效果很好.. 而且，该解决方案绝对有效！ https://digitizor.com/jquery-html-callback-function-using-promise/

【解决方案2】：

根据 Mike Robinson（和dystroy）的建议，我的问题的答案是：

$("#myContentDiv").html('HTML content comes here');
var contentImages = $("#myContentDiv img");
    var totalImages = contentImages.length;
    var loadedImages = 0;
    contentImages.each(function(){
        $(this).on('load', function(){
            loadedImages++;
            if(loadedImages == totalImages)
            {
                $("#myContentDiv").tinyscrollbar();
            }
        });
    });

【讨论】：

iScroll 和（未正确加载）图像也有类似的问题。由于未加载图像，父 DIV 不够高，滚动未显示全部内容。此解决方案有效！
谢谢，4小时后你给我解决方案！
这是正确答案。如果有图片添加了.html()，则需要先加载。
是的 - 这是正确的答案。不知道为什么上面的答案被标记为正确。

【解决方案3】：

为了检查图像是否加载，您可以使用以下;

<img src="your_image_path" />


<script>
    $('img').load(function() {
        //call_your_function();
    });
</script>

【讨论】：

【解决方案4】：

$(window).load(function() {
  // code here
})();

【讨论】：

问题是关于 HTML 的回调，而不是关于 windows 加载事件。