问题标签 [imagesloaded]

几个星期以来，我一直在尝试实现砖石和无限滚动，但我就是无法让它正常工作。

我用过这个脚本：https ://gist.github.com/kunalnagar/8232647

我的代码可以在这里看到：http: //pastebin.com/d6YPupNz

我在标题中调用了 Masonry 和 ImagesLoaded：

谁能看到我做错了什么？我是新手，现在完全不知所措。

非常感谢

我有一个附加外部 javascript 文件（从游戏创建者生成的文件）的索引文件。我正在尝试检查该javascript文件中的图像是否已加载，以便我可以通过将类“.loaded”添加到正文中来删除预加载器。我找不到允许我这样做的功能。我试过 .load、onLoad、document.ready 等。我认为 window.onload 仅在所有相关资源也被加载（图像）之后才执行，但它在加载附加的 javascript 文件之后但在图像之前触发。

示例代码：

我尝试在图像之前触发的一个选项：

$(document).ready(function() { $('body').addClass('loaded'); });

提前感谢您的帮助。

我想知道在应用程序中显示图像的最佳方法是什么？

执行获取请求时最好拉 URL 还是使用 base64 和解码更快？

谢谢

Masonry并且imagesLoaded应该加载并正常工作。已经建立了一个类似的站点，并且在那里它可以正常工作。我不知道我的问题出在哪里，所以我希望你能看到问题所在。应该少了点什么。

在 Chrome Inspect 中，我收到以下错误：

据我所知，这意味着.imagesLoaded应该Masonry正确加载？否则我会收到错误$container.imagesLoaded is not a function？

我试过的

• 检查 jquery-2.1.4.min.js 是否正确加载
• 更改加载 jquery 的顺序
• 在线搜索
• 在 jquery 中搜索错误

标题

HTML

页脚

该页面可以在这里找到。

它工作的类似页面

我将 masonry + imagesLoaded 用于包含具有多个图像的 div 的流体容器（无无限滚动），并且 div 的列数根据屏幕大小而变化。我也在使用 1 种谷歌网络字体。

我的问题是 imagesLoaded 似乎不起作用？我的容器的 div 仍然重叠。

我的脚本（我在此块之前包含了最新的 jquery、masonry 和 imagesLoaded 脚本，以及开头标签附近的 google 网络字体链接 href）：

和相关的css（不多）

我的 css 中是否有冲突？我已经尝试了与我相同问题的其他答案，但我的布局仍然无法正常工作。如果您需要一个活生生的例子，请告诉我。

I have got Masonry and ImagesLoaded running, they both seem to be working fine.

But yet my images are still not loading in a perfect grid. Only once the screen has been moved a few times it loads correct.

You can see the page here: http://pagedev.co.uk/page-newsite/work.php

Any help would be great!

My html is:

CSS:

JS:

Thank you in advance.

Lee

我正在使用 Magnific 弹出窗口在表格中滑动我的图像，这是 html 代码的一部分：

缩略图很好，如下所示：

当我点击图像时也可以： 当我想滑动图像时，我得到这样的屏幕：！我该如何解决这个问题？

我一直在尝试使用 Masonry 和 ImagesLoaded 创建一个包含 3 列的 Tumblr 布局。但是，我遇到了照片集重叠的问题。我也在使用 PXU Photoset。

问题：

在最初的几秒钟内，博客看起来很糟糕：http: //s11.postimg.org/ry4fa614j/Overlapping.jpg

然后，它固定到排序的列：http ://s16.postimg.org/i13qld4hh/no_Overlapping.jpg

此外，重叠仅发生在照片集帖子中。任何其他类型的帖子（包括只有一张图片的帖子）都可以正常工作。

我的代码：

到目前为止，这是最适合我的代码，但会产生我之前所说的问题：

在这里，threeCol是我的容器，而post是我想要放入网格的每个单独的帖子。

另外，我没有使用 InfiniteScroll。

目标：

我希望内容能够快速加载，并且在加载的第一秒内看起来不会损坏。

我已经尝试过：

由于我已经处理这个问题好几天了，我已经尝试了几件事。

这对我当前的代码根本不起作用。当它工作时，它非常慢，用户体验很差。

关于其他有解决方案的帖子，我尝试了很多，包括：

• 砌体 JS 重叠项目

• 带有 PXU Photoset 问题的 Tumblr 砌体

• 使用加载了图像的砖石

• 砌体重叠问题

• 砌体重叠（Imbalance2 Bug）

以及 GitHub 上的其他内容和我再也找不到的链接。

感谢您阅读我的问题，非常欢迎任何帮助！

编辑：

我的问题与之前的几个不同，因为我的问题是照片集（它们是在同一个帖子上的两个或多个图像的组，因此是同一个网格元素的一部分）而不是单个图像。我也不知道每个照片集中有多少张图片，我也不知道它们的大小。

照片集是 Tumblr 内的一种帖子。

我有一个可以在下面工作的代码，它有无限滚动和加载图像。Isotope 存在一个已知问题，即图像由于 srcset 属性与某些浏览器中的 Wordpress 响应图像重叠，但在 refresh 时得到纠正。

我使用了淡入淡出的 jquery 动画，但它仍然不起作用（没有淡入）。在下一组帖子中，图像拍摄到顶部，然后自行校正。

下面的代码：

我正在使用砌体网格来进行图像布局，如下所示：

第一行 - 两张图片 50/50%

第二行 - 三幅图像 33.33/33.33/33.33%

第三行 - 两张图片 50/50%

在通过 CSS 初始化和设置样式之前，布局工作得很好。初始化后，无论是否加载图像，它都会破坏布局。

http://codepen.io/byoungz/pen/JXOKqW

如果我将以上更改为 25%，则三列图像很好地排列在一起，为第四张图像留出空间。50% 宽度的图像相应地移动到顶部和底部。

如果我删除 50% 的两个项目，只留下 33.33% 的项目，它们似乎很好地排成一排。

是不是不可能有这种布局？我让许多其他人轻松工作。