问题标签 [imagesloaded]

我在网站上使用 Packery 并下载了 imagesLoaded，但我的图像在页面加载时仍然重叠。该网站可以在这里看到，我的代码如下：

任何帮助将不胜感激。

编辑： html 代码如下所示：

等等

所以在我将它添加.imagesLoaded到我的脚本之前，我的砌体正在工作，但它会重叠，因为图像没有在砌体之前加载。所以这就是我的函数的样子：

我应该使用pkgd.jsvspkgd.min.js吗？

我正在尝试将内联 HTML 加载到一个工作正常的颜色框中，除了颜色框没有调整到正确的高度。

内联 HTML 内容的高度非常长（大约 15,000 像素），但仅加载了 900 像素。

所以我开始使用 colorbox.resize() 函数来解决问题，例如：

但调整大小功能最多只能工作大约 11,000 像素（不是所需的 15,000 像素）。但是，如果我刷新页面两次，它会加载完整的 15,000 像素。

任何人都可以提出解决方案吗？

谢谢

imagesLoaded似乎是检测图像是否已加载的最佳解决方案（在撰写本文时，2014 年 11 月） 。

我发现 imagesLoaded 库具有以下特点：

• 许可证：麻省理工学院许可证
• 依赖：无
• 重量（缩小和压缩）：7kb 缩小（轻！）
• 下载生成器（有助于减轻重量）：不需要，已经很小了
• 在 Github 上：是的
• 社区和贡献者：相当大，4000 多个成员，虽然只有 13 个贡献者
• 历史和贡献：相对较旧（自 2010 年以来）稳定但仍然活跃的项目

以上所有特点都指向了一个非常高质量的产品的方向。但是，我仍然无法在官方网站imagesloaded.desandro.com和 Github 页面github.com/desandro/imagesloaded上找到明确提及的一些信息：

1. 什么是浏览器支持？
2. 什么是设备支持？

尽管我认为第二个问题的答案很明显，但我希望得到确认。

编辑：我只记得这个答案提到它在 IE7+ https://stackoverflow.com/a/19959809/759452上工作，但仍然欢迎进一步的反馈

编辑 2：我刚刚发现另一个消息来源说它不支持 IE7，这次是由库的创建者本人，请参阅 github.com/desandro/imagesloaded/issues/16 上来自“desandro on 30 Nov 2012”的消息

我正在尝试使用 masonry 和 animoscroll.js 复制鼓室演示。唯一的区别是我使用的是带有图像的 div 卡，而不仅仅是图像。

这是工作鼓膜演示http://jsfiddle.net/Sfmv9/19/light/

这是我的代码：http ://codepen.io/anon/pen/CotJv 。

无论出于何种原因，这在codepen中都有效，但我在本地机器上遇到了以下问题。

1. 卡片在滚动时没有动画

2. 有时，卡片会彼此重叠加载（我猜这意味着 imagesLoaded 无法正常工作）

3. 我收到：

   '类型错误：无法读取 null imagesloaded.js 的属性'长度''

这是我在过去两个月中发布的关于此问题的第三个问题，但仍然无法弄清楚为什么会出现此错误以及如何解决它。我再次发布此信息（提供更具体的信息），看看是否有人可以提供帮助。

错误似乎出现在 imagesloaded.js 中的此函数中

根据我之前帖子中某人的建议，我尝试更改obj.length == 'number'为：

在许多其他尝试的解决方案中，我还尝试将我的容器类更改为 AnimOnScroll.js 中的容器 ID，但错误仍然存​​在。因为我对 js 有点不放心，所以我无法追踪 AnimOnScroll、ImagesLoaded 和 Masonry 是如何相互连接的，所以我不知道问题实际上是在 ImagesLoaded.js 还是在 AnimOnScroll.js 中。

最让我困惑的是为什么这可以在 codepen 中工作，但不能在我的本地机器上工作。

如果有帮助，这里是我之前问题的链接。

为什么我的 div 在滚动时没有动画？

https://stackoverflow.com/questions/26721098/what-c​​ould-cause-animonscroll-js-to-work-on-codepen-but-not-on-my-local-machine

为什么我在这个 js 代码中得到“无法读取 null 的属性 'length'”？

我有以下代码：

我已经为这段代码写了几个测试，但我似乎无法让它执行：

输出：

我在主页中使用angular-isotope来组织我的项目，但有时它会与我的图像重叠......

要修复它，我知道我应该使用imagesLoaded并且当我将 Isotope 与 jQuery 一起使用时，它很容易实现，但现在我将它与AngularJS一起使用，我该如何添加它？

我尝试对指令进行一些修改，但我仍然不具备正确执行此操作的知识，并且收到大量错误，或者它根本不起作用...

我还发现angular-images-loaded但我不明白如何实现它以使用angular-isotope。

我很确定有人已经遇到过这种问题，但我没有在这里找到任何与此论点相关的问题，也没有在 Google 周围找到任何问题。

一个教程或一小段代码的链接将不胜感激，以了解如何修复/实现它。

我有一个页面可以将大约 150 多个图像加载到一个页面中。图像的结构是这样的：

代码

（我已经删除了图像的完整路径，以至少使上面的代码）

CSS 代码

查询

我想要实现的是在每个单独的图像上显示一个预加载微调器（.is-loading），直到加载了某个图像。加载完成后，微调器将删除显示原始图像。

我尝试过使用 jQuery imagesLoaded 库来让它工作，但我做不到。这可以做到吗？

任何帮助将不胜感激，谢谢

所以这就是我想要做的。我有一个包含很多图像的网格，所以我将 imagesLoaded 库与砖石一起使用。

这是我的CSS：

和 HTML：

这是我的 JS：

我的目标是隐藏网格，直到所有图像都加载并且布局完成，然后将其淡入。由于某些原因，在我上面的代码中，它永远不会进入 on layoutComplete 块。

如果我将该块移到 imagesLoaded 之外，则 $container.masonry 在那一点上是未定义的。

有任何想法吗？

在这里提琴

如果您将网格不透明度更改为 1，您可以看到一切都布置得很好。只是想弄清楚如何让 layoutComplete 调用以将不透明度设置为 1。

我有一个 React.js 组件，它在页面加载时呈现元素列表，但是可以使用过滤器更新此列表，该过滤器将从列表中删除某些元素并将修改后的列表保存在组件的状态中。我设法使此功能正常工作，因此状态已正确更新。

虽然元素被正确地重新渲染，但当渲染的元素越少时，使用的空间就越少。发生这种情况时，页面的高度不会缩小以适应页面占用的新大小，并在我的页脚下留下空白内容，这是我页面的最后一个元素。

编辑 ：

我对此进行了更多研究，我认为 React.js 可能不是我的问题的原因。我在每次更新组件状态后调用一个使用 imagesLoaded 和 Wookmark jQuery 插件的函数，看起来每次状态更改后调用此函数都无法正常工作。我应该在被调用的函数中更改什么，或者我应该在另一个时间点调用该函数吗？

调用的函数定义如下：