问题

Question

我将jQuery Isotope实现到http://voicent.com/case-studies/

如果你正常访问网址，它大部分时间都可以使用。但是，如果你击中F5，它每次都会中断。我不确定为什么它表现得很奇怪，通过工作而有时不工作。

这是Isotope的错误，还是我的实施有问题？

当我点击F5时，我的localhost副本在99％的时间内完美运行。

   <script>
        $(document).ready(
                function() {
            // init Isotope
            var $grid = $('.grid').isotope({
                itemSelector: '.element-item',
                layoutMode: 'fitRows',
                isResizeBound: true
            });
            // filter functions
            var filterFns = {
                // show if number is greater than 50
                numberGreaterThan50: function() {
                    var number = $(this).find('.number').text();
                    return parseInt(number, 10) > 50;
                },
                // show if name ends with -ium
                ium: function() {
                    var name = $(this).find('.name').text();
                    return name.match(/ium$/);
                }
            };
            // bind filter button click
            $('.filters-button-group').on('click', 'li', function() {
                var filterValue = $(this).attr('data-filter');
                $('.tags__link--active').removeClass('tags__link--active');
                $(this).addClass('tags__link--active');
                // use filterFn if matches value
                filterValue = filterFns[ filterValue ] || filterValue;
                $grid.isotope({filter: filterValue});
            });
            // change is-checked class on buttons
            $('.button-group').each(function(i, buttonGroup) {
                var $buttonGroup = $(buttonGroup);
                $buttonGroup.on('click', 'button', function() {
                    $buttonGroup.find('.is-checked').removeClass('is-checked');
                    $(this).addClass('is-checked');
                });
            });

        });
    </script>

Answer 1

问题

图像可能会导致您的问题。由于你的同位素正在开始准备好DOM，因此图像没有被完全加载，弄乱了同位素的计算用于定位。

为什么它可以在本地计算机上工作或直接访问URL？那是因为在本地机器上，加载时间非常快（几乎是瞬间），所以计算很好。在远程服务器上，图像缓存在您的计算机上，因此请求也非常快。按F5时，浏览器无法在缓存中获取图像，但会发出新请求。

解决方案

如果您查看isotope的常见问题解答，您会看到第一个问题就是您的问题：

如何修复重叠的项目元素？

如果您的布局包含图片，则可能需要使用imagesLoaded。

重叠项目是由布局后更改大小的项目引起的。这是由卸载的媒体：图像，web fonts，嵌入式按钮引起的。要解决此问题，您需要在所有项目的大小合适后初始化或layout。

所以在阅读之后，解决方案是添加到您的代码中（在Isotope初始化之后）这些行：

$grid.imagesLoaded().progress( function() {
  $grid.isotope('layout');
});

不按F5时jQuery Isotope工作

1 个答案:

问题

解决方案

如何修复重叠的项目元素？