问题标签 [imagesloaded]

I found actually a few questions about this on StackOverflow but they didn't resolve my problem, so I'm trying asking here.

When I load the page all the masonry bricks are stacked all together in the top/left of the window. When I resize the page they arrange in their correct position. I'm using javascript in a page of Wordpress. This is the code at the bottom of the page:

I undestrood from previous questions on StackOverflow that I have to use "imagesLoaded()". But where and how should I add it? I'm a novice in javascript.

Any suggests?

我正在使用imagesloaded和 jquery，请参见下面的代码。

它只检查abc.jpg（源中指定的第一个图像）。代码未检查第二张图像。如何检查所有图像img.src？

我正在使用masonry.js和imagesloaded.pkgd.js插件。ImagesLoaded 脚本应该在初始化砌体之前检测浏览器何时完成加载图像。

虽然这适用于 img 标签中的图像，但它不适用于HTML5 Video 的海报标签。

有没有办法让 ImagesLoaded 与 HTML5 Video Poster 属性一起玩得很好？

我猜标题几乎可以解释我的问题，我正在使用 Bootstrap 选项卡，所以我的 html 看起来像这样：

图像如下所示：

这是我的JS：

但由于某种原因，它只加载 tab1 而不是 tab2，这里有人为我提供解决方案吗？哦，不加载我的意思是tab1上的图像加载正确，并且tab 2上的图像重叠

与许多用户一样，我在使用同位素时遇到了常见的重叠问题。我尝试集成 imagesLoaded 并且它在一定程度上起作用，但是因为我想显示 100 多张照片 - 在布置同位素之前等待所有照片加载效率不高。再加上在同位素触发之前将所有 100 个图像加载到一个列中。我也尝试将 LazyLoad 添加到等式中，但无济于事。经过无休止的研究和阅读，我得出的结论是，在我遇到这个网站之前，我想要实现的目标是不可能的：

http://www.erikjohanssonphoto.com/

这正是我一直在努力实现的目标。如您所见，无论首先加载哪些图像，所有图像都会加载到正确的位置。加载图像后没有重新布局，但是随着您向下滚动显示更多图像，它是渐进的。最重要的是，设置是响应式的。当您调整窗口大小时，网格项目会相应地缩放，并且列数也会随着每个设置的增量而变化。

任何帮助或实现这一目标的建议将不胜感激！

HTML

CSS

JS

我正在尝试构建自己的“无限滚动”，因此我比使用插件拥有更多的控制权。

我目前有以下内容：

到目前为止，当用户滚动到页面底部时触发，然后从分页中获取“下一个”URL，并在成功调用中返回页面的完整 HTML。

正如您在我的代码中看到的那样，我想获取所有带有“.grid-item”类的 div，以供下面的代码使用。

我真的很难将'.grid-item' div 分开使用。

有谁能够解释我怎么能做到这一点？

在我的网络应用程序中，我想显示其中包含<img>元素的弹出元素。图像源通常比我需要的大，所以它在 css 中调整大小。在我展示它之前，我需要知道它是outerHeight.

弹出窗口看起来像这样：

在我将它附加到另一个元素之后，我尝试通过两种方式检索它的高度：简单地popup.outerHeight(true)和使用imagesLoaded库：

在大多数情况下，这两个选项都会返回相同的预期结果（例如元素在浏览器中的实际高度）。但有时选项 #1 返回的高度太小，因为图像源尚未加载，而选项 #2 返回的高度太大，因为尚未应用 css。（我认为这就是原因）。所以我想知道，什么是恢复它的高度的最佳时间？何时加载图像并且元素将根据 css 正确格式化。

我正在为我的角度应用程序使用 ui-router。我有一些包含图像的视图。我希望角度加载栏也可以在这些图像完成加载时进行跟踪。或者更一般地说，直到视图完成渲染。

当我偶然发现那篇关于如何使用 angularJS 进行 SEO 的帖子时，它表明我们必须为每个“页面”创建静态 html 快照并将它们提供给搜索引擎机器人，以便它们可以被抓取。为此，我们必须自己使用无头浏览器爬取应用程序中的所有页面，并将 html 存储到将要提供的文件中。但是，由于 Angular 必须通过 ajax 和所有方式加载视图，我们必须等待页面加载完毕，然后才能存储无头浏览器 html 的内容。否则我们会得到带有空视图的空 html。

我写了一个小脚本，可以检查我们视图的就绪状态。当 $rootScope.status 属性等于 'ready' 时，我知道我可以存储我的无头浏览器的 html，因为它已完成加载。

然后，在我们的每个控制器中，我们必须调用

当控制器准备好时

有了这个，我们就可以检查我们所有的控制器是否都渲染了他们的视图。它现在不是超级优雅，但它可以完成工作。

该脚本可以很好地与 angular-loading-bar 集成，因为它跟踪整个应用程序的准备情况。进度条可能是该进度的指示器。这样做的缺点是它与 angular-loading-bar 跟踪 XHR 请求的自然行为有冲突。

例如，在我的控制器中，我使用这个：

此代码应直接在跟踪视图准备情况的 $rootScope 脚本中迁移。

不过，angular-progress-bar 仍然在后台工作。我激活了 XHR 拦截器。但是，如果 XHR 请求在图像加载之前完成，即使视图尚未完成，进度条也会消失。同样，如果在 XHR 请求完成之前加载了图像，则进度条会消失。

如何将 angular-loading-bar 的 XHR 拦截功能与此视图准备拦截功能集成？

这是一个自我问答

通常我的创意总监会要求构建一个 Masonry 供电的网格，但要使其具有响应性。然后新版本的 Masonry可以做到这一点，但是对于可变高度的图像，初始布局看起来很糟糕。解决方案是imagesLoaded插件，但目前尚不清楚将其应用于网格的最佳方法，特别是如果该网格是由 CMS（在我的情况下为 WordPress）生成的。

所以我的问题是，如何最好地制作一个响应式 Masonry 网格，即 3 列宽，并且在初始加载时看起来不错。

我正在尝试做一些非常简单的事情，但显然我做错了什么。这是代码：

这不知何故行不通。JsFiddle 示例在这里

不破解 imagesLoaded 插件就不可能传递变量吗？还是我错过了什么？