Question

比开发人员更多的UX设计师，我希望有人可以在这里解决我在网站设计上遇到的问题。我已经在以下地址创建了一个网站：

www.imaginationcreation.co.uk/website2

在初始加载中，如果您单击投资组合或向下滚动到该部分，您将看到投资组合图像彼此堆叠，并重叠到下一部分；据我所知，只是造成重叠问题的图像堆叠，一旦纠正，一切都应该可以；但是我找不到图像堆叠的解决方案

有人可以帮助我吗？我可以根据需要提供文件

随附的是初始页面加载时的屏幕截图（请参见on initial load.jpg和刷新页面after page refresh之后的屏幕截图

谢谢

Answer 1

我认为您正在此插件中用于投资组合部分。
http://yiotis.net/filterizr/

在您的jscode 中（在初始化filterizr的位置），我发现了一些错误的字符�� http://www.imaginationcreation.co.uk/website2/assets/js/function.js

var workfilter = $('.work-masonry');
    workfilter.filterizr({
    ������//your options here
      layout: 'packed',
    });

    $('.filters-group li .filter').on('click', function() {
      $('.filters-group li .filter').removeClass('is-checked');
      $(this).addClass('is-checked');
    });

});

修复为：

var workfilter = $('.work-masonry');
    workfilter.filterizr({
    //your options here
         layout: 'packed',
    });

    $('.filters-group li .filter').on('click', function() {
      $('.filters-group li .filter').removeClass('is-checked');
        $(this).addClass('is-checked');
    });

});

这可能是造成问题的原因，如果问题仍然存在，请尝试，请稍后反馈给我。

20180727更新.. 。

似乎$（'。filters-group li .filter'）。onClick表示filterizr表现良好。因此，让我们首先在pageLoad时触发点击事件！

尝试更新至：

var workfilter = $('.work-masonry');
    workfilter.filterizr({
    //your options here
         layout: 'packed',
    });

    $('.filters-group li .filter').on('click', function() {
      $('.filters-group li .filter').removeClass('is-checked');
        $(this).addClass('is-checked');
    });

    // trigger click event at first
    var e = $.Event('click');
    $('.filters-group li .filter').trigger(e);
});

尝试一下。

20180727-v2更新

您好，我发现是由于图像未完全加载导致filterizr.js无法在每个img中定义.work-item的高度。

因此，我们应该做的是确保所有图像均成功加载，然后激活filterizr.js插件...

更新以下代码：

// 04.3 Portfolio Filterizr
//================================================================================
var workfilter = $('.work-masonry');
var perItem = $('.work-masonry .work-item');

/* Here test before filterizr plugin active, if images load completely or not (value = 0, means imgs not loaded) */
console.log('Test if images load completely or not!! item Height::', perItem.height());

var activeFilterizr = function() {
    workfilter.filterizr({
        //your options here
        layout: 'packed',
    });

    /* Here test after images load successfully and filterizr.js plugin active (value should be correct number) */
    console.log('When Images Ready!! item Height::', perItem.height());

    /* The $('.filters-group li .filter') seems not in the index.html you gave me so i comment out the code below */
    // $('.filters-group li .filter').on('click', function() {
    //   domFilter.removeClass('is-checked');
    //     $(this).addClass('is-checked');
    // });
}

//window preload images events
function imageLoadEvent(activeFilterizr) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = activeFilterizr;
    } else {
        window.onload = function() {
            if (oldonload) {
                oldonload();
            }
            /* Make sure images load successfully then active the filterizr.js plugin */
            activeFilterizr();
        }
    }
}
//Start preload event
imageLoadEvent(activeFilterizr);
// 04.3 Portfolio Filterizr End

我写了console.log（）来检查img的高度，如果加载不完全，您将在浏览器的控制台中看到以下内容：

'Test if images load completely or not!! item Height::' 0

尽管如此，imageLoadEvent函数可帮助您预加载所有图像，然后启动filterizr.js，否则，直到图像准备就绪，它才会启动！

'When Images Ready!! item Height::' 267

顺便说一句，第一次加载页面重叠的原因是由于干净的浏览器cahce花费了更多的时间来加载图像。这就是问题发生的原因。

投资组合图片在初始加载时彼此叠加加载

1 个答案: