jQuery Isotope 在不按 F5 时工作

Question

我将 jQuery 同位素应用到 http://voicent.com/case-studies/

如果你正常去 URL，它大部分时间都有效。但是，如果你按 F5，它每次都会崩溃。我不确定为什么它表现得很奇怪，有时工作有时不工作。

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

当我按 F5 键时，我的本地主机副本在 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

问题

这些图像可能会导致您的问题。由于您的 isotope 在 DOM 准备就绪时启动，因此图像尚未完全加载，搞乱了 isotope 的定位计算。

为什么它在本地机器上或直接访问 URL 时有效？那是因为在本地机器上，加载时间非常快（几乎是即时的）所以计算没问题。在远程服务器上，图像缓存在您的计算机上，因此请求也非常快。按 F5 时，浏览器没有获取缓存中的图像，而是发出新请求。

解决方案

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

How do I fix overlapping item elements?

If your layout has images, you probably need to use imagesLoaded.

Overlaping items are caused by items that change size after a layout. This is caused by unloaded media: images, web fonts, embedded buttons. To fix it, you need to initialize or layout after all the items have their proper size.

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

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

jQuery Isotope 在不按 F5 时工作

jQuery Isotope works when not pressing F5

jquery

jquery-isotope

问题

解决方案

How do I fix overlapping item elements?