jquery砌体在初始页面加载时崩溃，在点击“home”之后工作正常。菜单按钮 [英] jquery masonry collapsing on initial page load, works fine after clicking "home" menu button

问题描述

我的jquery masonry设置在初始页面加载时工作奇怪。似乎是将图像放置在第一行中的精细，第二行被定位为与第一行重叠，并且对于第三行是相同的。页面加载后，您可以点击主页按钮或标志，然后重新加载页面，它工作正常。

My jquery masonry setup is working strangely on initial page load. It seems to be placing the images in the first row fine, the second row is positioned overlapping the first and the same for the third row. After page load, you can click the home button or the logo and reload the page and it works fine.

我在functions.php中有这个代码，和jquery脚本：

I have this code in the functions.php to put the masonry and jquery scripts in:

if (!is_admin()) {
    wp_enqueue_script('jquery');
    wp_register_script('jquery_min', get_template_directory_uri(). '/js/jquery.min.js', array('jquery'), '1.6.1' );
    wp_enqueue_script('jquery_min');
    wp_enqueue_script('jquery');
    wp_register_script('jquery_masonry', get_template_directory_uri(). '/js/jquery.masonry.min.js', array('jquery'), '2.1.06' );
    wp_enqueue_script('jquery_masonry');
}

此脚本位于head.php：

This script is in the head.php:

<?php if (is_page(2)) { ?>
    <script>
        $(function(){
            $('#content').masonry({
                // options...
                itemSelector : '.product',
                columnWidth : 310,
                isAnimated: true,
                animationOptions: {
                    duration: 700,
                    easing: 'linear',
                    queue: false
                }
            });
        });
    </script>
<?php } ?>

这是指向 site 。

对于为什么在初始网页加载时出现奇怪加载的想法？

Any idea as to why this is loading strangely on initial page load?

我对脚本编写任何东西都很新，所以请你好好。

I'm pretty new to scripting anything, so please be kind.

推荐答案

我认为这是因为脚本在内容（图像）未完全加载之前运行。因此定位错误。

I think it's because the script is being run before the content (images) is not fully loaded. Hence the positioning error.

尝试此操作。

  $(window).load(function()
  {
      $('#content').masonry({
           itemSelector : '.product',
           columnWidth : 310,
           isAnimated: true,
           animationOptions: {
                duration: 700,
                easing: 'linear',
                queue: false
           }
      });
  });

这篇关于jquery砌体在初始页面加载时崩溃，在点击“home”之后工作正常。菜单按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！