使用 AJAX 加载 html 时，如何在执行“某些操作”（例如显示它们）之前检查该 HTML 中的所有图像是否已完全加载。

我尝试了多种方法，包括“imagesloaded”插件。

设置为“数据”的 html 大约为 20，如下所示：

新的

我正在尝试让 Packery / Masonry 处理组件。Packery 正在检测容器，但将其高度设为零，表明即使我使用的是 imagesLoaded，内容也没有加载。我尝试过使用各种生命周期钩子，但它们都有相同的结果，以至于我错在哪里。

我有一个网站，使用引导程序和我用砖石创建的新闻，我使用了 Infinite Ajax Scroll，它在不同的 div 中调用其他新闻，而不是预先默认。然而，很多时候，如果一个人快速滚动页面，或者如果你的连接速度很慢，元素会重叠并且不会返回它们的位置，我认为这是因为它无法加载图像。我试图集成Imagesloaded，但它似乎无法正常工作......而且我不知道该怎么做......这是我继续进行的源代码，HTML：

JS：

我遇到了页面加载时砌体图像重叠的问题。为了使图像布局正确，我尝试添加此代码，但仍然无法正常工作并出现错误：未捕获的 TypeError: $container.masonry is not a function

我让 Masonry 在 WordPress 中为我正在创建的页面工作，该页面有大约 20 个加载图像，然后触发 Masonry。看起来很完美，除了连接速度很慢之外，它会加载所有 20 多张图片，然后才将它们网格化。理想情况下，我希望在每张照片之后触发砌体，就像正在建造一堵墙一样。我确信它可以完成，但我无法让它工作。

到目前为止，我使用的用于砌体运行的代码如下：

然后，我一直在尝试以下方法来让它在每个图像之后加载，但它不起作用，

我确定这是可能的，有人可以帮忙吗？

问题

我应该如何修改我的脚本来初始化 Masonry，或者重新排列我的脚本的顺序。

背景

我在我创建的其他网站上也遇到过类似的问题，但目前我在 http://divedemo.tumblr.com/上构建的 Tumblr 主题上有它

我正在测试主题。错误的结果是图像堆叠得太近了。我之前的研究说这是因为盒子没有设定高度。但是到目前为止我发现的解决方案并没有考虑到响应式网站。

我进入控制台看看发生了什么

错误（截图）

Javascript

砌体无限滚动附加html5视频重叠

我目前正在使用imagesLoaded检查图像是否已加载然后调用的库masonry。

但它不适用于 html5 视频标签，因为这些视频彼此重叠。

所以我在初始加载时将调用masonry从更改document.ready为window.load并删除了调用，imagesLoaded即从此

对此

现在html5 videosinmasonry没有重叠，并且在页面的第一次加载时完美呈现initial load，但由于我也在使用infinite-scroll它在向下滚动页面时添加更多images/videos内容，因此当新视频被添加到容器时它们被重叠，这种行为是由早期引起的masonry在加载所有视频元素之前运行，因为imagesloaded无法检查videos loaded.

这是代码。

我也尝试过在上面的代码中进行更改document.ready，window.load并完全删除运行imagesloaded，但它不适用于infinitescroll.,

例如修改代码

还有另一种方法可以解决这个重叠问题，通过指定视频宽度和高度，但作为其响应式设计，指定视频宽度和高度会破坏响应能力。

所以我的问题是，是否有任何类似于 imagesloaded 的 js 库来确保所有视频都已加载，然后我可以调用 masonry ？或者我怎样才能确保视频不会overlapped播放infinitescroll？

更新 1：

我尝试了很多技术，用于无限滚动

页面滚动后不加载新内容。

页面滚动后不加载新内容。

重叠视频内容

所以我想出infinite-scroll早点打电话并减慢container.masonry3 秒的速度，这目前工作得很好。但仍在等待适当的解决方案。

例如

以上是将正在运行的砌体延迟 3 秒。

我尝试寻找类似window.loadfor的东西div，但没有，所以我最好的选择是检查所有videosand是否images已加载，然后在调用masonry后调用infinite-scroll

添加了工作演示http://plnkr.co/edit/46YzHBJ7eFAXfsPqZB1q 您可以通过单击运行并向下滚动来查看问题。

基本上我有一个标准的 imagesLoaded 实现。我想知道如何在 .done() 中操作预先存在的变量。所以基本上是这样的：

然而，p 似乎永远不会改变。另外，我正在使用 React，因此 React 的渲染周期可能会使事情复杂化？我对 React 还是有点陌生​​，所以我不确定 React 是否导致了我的问题，或者我只是错误地使用了这个延迟对象。我很感激任何反馈。谢谢。

I have a class called PhotoTags that has a function called getScalePercent(). In getScalePercent I do a simple calculation involving the width and height of a displayed image, and return a value. In the render function of PhotoTags I use coordinate data to apply elements over a photo. This logic works fine only if the image has been loaded 100%. If I refresh the page enough times I can see that my logic is in fact setting the coordinates properly but only once the image has either been cached, or loaded quickly. Therefore I want to use imagesLoaded to check if the image has loaded, inorder to use the coordinates effectively.

My function looks like this:

And in my render function I am trying to use imagesLoaded to check if the image has been loaded before using getScalePercent():

My variable p is not being manipulated within the .done event of imagesLoaded. I know it has something to do with asynchronous calls and what not, and I have tried putting imagesLoaded in getScalePercent() but to no avail. I have also tried doing a callback to getScalePercent() and many other variations but still to no avail. Basically what I want to do is fire getScalePercent() inside the .done() event of imagesLoaded. I then want to be able to use the value that getScalePercent() returns (when the image is fully loaded) inside the render function of PhotoTags. Any help is much appreciated.

我有一个大的对象网格，我用isotope过滤。我正在使用组合过滤器和搜索框，并且我也在使用 imagesLoaded（由于项目数量众多，这是必要的）。一切正常。

我还想打印过滤的项目数。我按照说明here

这是我的代码：

我怀疑它不起作用的原因是我使用了 imagesLoaded？在控制台中，我得到“TypeError：iso 未定义”。但我不知道如何解决它。