jquery - 重新加载时合理的图库中断

Question

我正在为我的网页使用 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);

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

Answer 1

你永远不应该像这样运行全局操作 DOM 的代码。您得到的是实际模板渲染的竞争条件。这有时会随机工作，有时随机不工作，并且总是会与模板引擎发生冲突，这最多会影响应用程序的性能。

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

<小时/>

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