jQuery html() 回调函数

Question

这个问题已经被问了几次，但没有得到解答可以帮助我解决具体问题。从导航列表中，点击一个项目后，我使用.html()函数将一些HTML内容加载到一个div中。这里没有ajax请求。由于HTML内容包含图片，因此可能需要一些时间才能加载完成。由于.html()是同步操作，所以下一行代码会立即执行。

在使用.html()加载内容之后，我启用了一个第三方自定义滚动条，称为tinyscrollbar。如果加载的内容中包含图片，则滚动条会在图片加载之前计算内容div的高度，导致无法完全滚动。

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

谢谢。

- walmik

---

您可以确定内容中有多少张图片，然后侦听它们的onload事件。 - Mike Robinson

你尝试过在每个图像标签上定义固定的宽度和高度吗？即使图像还没有加载，如果滚动条知道图像的高度，它也应该能够正确计算出高度。 - Brian Glaz

$(document).ready 不能起作用，因为它正在等待图片吗？ - Matthew Riches

robinson的评论似乎是正确的答案。你可以简单地使用类似于$("#mydiv img")的东西来迭代图像。 - Denys Séguret

图片上有设置高度和宽度吗？ - Baijs

Answer 1

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

- Deb

---

小心过度链接到（我猜测是）你的博客，并且几乎没有其他信息，比如你在此处提供的类似答案。这可能被视为垃圾信息。 - Wesley Murch

最好使用then()而不是done()，以更符合标准的JavaScript Promise对象：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise - Boykodev

这个回答有误导性。.html() 是同步的，而 .promise().done() 并不等待 .html() 方法执行完成。相反，它只是在事件循环的下一个时钟周期中运行回调函数，类似于使用 setTimeout(yourLogicFunction, 0) 的情况。这种方法可能“有效”，但它并没有等待 .html() 执行完成。 - Kevin B

@Deb 这个调用在官方API文档中有记录吗？因为我一直在寻找，我对浏览器兼容性有些担忧。 - kinsley kajiva

这是评论中提到的链接，我认为它很好，值得粘贴。此外，解决方案绝对有效！ https://digitizor.com/jquery-html-callback-function-using-promise/ - Irf

Answer 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();
            }
        });
    });

- walmik

---

我曾经遇到过一个类似的问题，与iScroll和（未正确加载的）图像有关。由于图像未加载，父级DIV的高度不够，导致滚动条无法显示整个内容。这个解决方案是有效的！ - Kozuch

谢谢，经过4个小时你给了我解决方案！ - joseantgv

这是正确的答案。如果使用.html()添加了图片，则需要先加载它们。 - ow3n

是的 - 这是正确答案。不知道为什么上面的答案被标记为正确。 - tim92109

Answer 3

为了检查图像是否已加载，您可以使用以下代码：

<img src="your_image_path" />


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

- Hüseyin BABAL

Answer 4

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

- Joey

---

问题是关于HTML回调函数，而不是关于窗口加载事件。 - mshahbazm