jquery - 重新加载时 justifiedGallery 中断

我正在为我的网页使用 justifiedGallery。当我第一次访问该页面时，图库显示正确。但是当我重新加载页面时，它会中断。



我正在使用 meteor 并使用react。

旧代码示例:

$(document).ready(() => {
  $('#gallery').justifiedGallery({
    rowHeight: 400,
    fixedHeight: false,
    lastRow:   'justify',
    margins:   -3,
  });
});

我已经把它放到了 jQuery setTimeOut() 函数中。

setTimeout(function(){
  $('#gallery').justifiedGallery({
    rowHeight: 400,
    fixedHeight: false,
    lastRow: 'justify',
    margins: -3,
  });
}, 100);

现在它工作正常。我只需要知道这是修复它的正确方法吗？这是为了将来的证明。

最佳答案

你永远不应该像那样运行全局操作 DOM 的代码。你得到的是实际模板渲染的竞争条件。这有时会随机起作用，有时会随机不起作用，并且总是会与模板引擎发生冲突，这充其量只会阻碍应用程序的性能。

将图库创建移动到 Template.onRendered() 方法并使用 this.$('.gallery') 而不仅仅是 $('#gallery') 。如果您使用的是 React，则等效的位置是包含 componentDidMount div 的表示组件的 .gallery 方法。

旁注:不要使用 id 进行元素选择，使用类或数据属性。 Id 是一种不好的做法，因为您创建的组件不可重用，并且可能存在性能问题。

关于jquery - 重新加载时 justifiedGallery 中断，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36686138/