Question

我使用的Wordpress主题遇到了问题。我绝对不是开发人员，所以请忍受我，我会尽力将问题描述得尽可能清楚。

基本上，在我更改浏览器窗口的大小之前，网格画廊不会显示。加载页面后，该元素似乎在那里，但是图像不可见。在我对浏览器的窗口大小进行任何更改之后，它们便会弹出它们的位置。然后一切都会按预期进行，直到重新加载页面为止。

Here you can see the page right after loading.

And here right after I used inspect element, which resizes the window.

Link如果您想亲自查看该页面。

是否可以通过自定义CSS或JS显示此内容？

我了解它的工作量并不大，如果需要，我很乐意提供更多信息。

Answer 1

我对wordpress不太了解，当然我也不了解您使用的这个Gallery插件，并且这不是解决方案，这是一种解决方法，因此，如果有人发布实际的解决方案，您应该尝试解决此问题。

我注意到您或某些插件已导入jQuery，因此我们将使用它。

(function () {
  function triggerFakeResizeEvent () {
    window.dispatchEvent(new CustomEvent('resize'));
  }
  if (jQuery.isReady) {
    triggerFakeResizeEvent();
  } else {
    jQuery.ready(triggerFakeResizeEvent);
  }
})()

如果页面已完全加载，则会触发假的调整大小事件，否则将等待页面加载，然后触发该事件。

我不确定您对在Wordpress中放置自定义JavaScript有多少控制权，但重要的是，此代码将在jQuery和您的Gallery插件加载后执行。

如果您无法执行此操作，或者控制台显示诸如jQuery is not defined之类的内容，请尝试将其放置

  (function (){
    function triggerFakeResizeEvent () {
      window.dispatchEvent(new CustomEvent('resize'));
    }
    triggerFakeResizeEvent()
    document.addEventListener('DOMContentLoaded', triggerFakeResizeEvent);
  })()

图库网格显示不正确

1 个答案: