Question

我有点挣扎 - 我的网站上的砌体网格没有在初次访问页面时加载（只有在我再次刷新时才加载？）网格中的所有图像都正常加载，只是脚本不是跑了。

您可以在本网站的主页上查看：http://moniquewilmoth.com

Answer 1

您的页面正在加载多个版本的jquery（3.1.0来自googleapis-cdn，3.1.1来自本地服务器，2.2.0来自cloudflare-CDN）和两个版本的砌体（4.1.1来自本地服务器和4.2） .0通过unpkg-CDN）。

我认为，这些不同的版本相互冲突并造成麻烦。只导入这些脚本的一个（最新）版本，它应该运行。

在我的情况下，Masonry通过在Win 10上测试Chrome和Firefox来运行，但是IE和Edge失败了（但在重新加载页面后再次工作）。

如果您打算为CDN版本提供本地回退，请查看此处： How to load local script files as fallback in cases where CDN are blocked/unavailable?

Answer 2

一些问题。你正在装载同位素和砖石。它们是独立的库。同位素具有砖石布局，但它们不是一起使用的。删除库＆＃34; js / isotope-docs.min.js＆＃34;然后像这样加载js文件：

<script src="js/jquery.min.js"></script>
<script src="js/masonry.pkgd.min.js"></script>
<script src="js/scripts.js"></script>

接下来，您在第二次调用没有设置任何选项的情况下两次调用砌体：

  var elem = document.querySelector('.grid'); 
  var msnry = new Masonry( elem, {
  // options
  itemSelector: '.grid-item',
  columnWidth: '.grid-width',
  stagger: 30,
  });

  // element argument can be a selector string
  //   for an individual element
  var msnry = new Masonry( '.grid', {
  // options
  });

将代码更改为：

 var elem = document.querySelector('.grid');
 var msnry = new Masonry( elem, {
 // options
 itemSelector: '.grid-item',
 columnWidth: '.grid-width',
  stagger: 30,
 });

第三，您应该考虑将imagesloaded.js用作described here以避免图像重叠。

砌体网格没有加载

2 个答案: