Html 组合图像在初始加载时彼此重叠加载

作为更多的用户体验设计师而不是开发人员，我希望有人能帮助我解决我在网站设计方面遇到的问题。我已在以下地址创建了一个站点：

www.imaginationcreation.co.uk/website2

在初始加载时，如果您单击公文包或向下滚动到该部分，您将看到公文包图像堆叠在一起，并重叠到下一部分；从我可以告诉它只是图像叠加，这是造成重叠的问题，一旦纠正它应该都是好的；但是我找不到解决图像堆叠的方法

有人能帮我吗；如果需要，我可以提供文件

附件是初始页面加载的屏幕截图（请参阅和刷新页面后的屏幕截图）

---

谢谢你

我想你在公文包部分使用了这个插件。

在您的jscode中（在filterizr中），我发现了一些错误的字符������

将其固定为：

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组li.filter'）.onClick，那么filterizr就会显示得很好。因此，让我们在第一次页面加载时触发click事件

尝试更新到：

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
的高度

所以，我们应该做的是确保成功加载所有图像，然后激活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在加载图像上花费了更多的时间。这就是问题发生的原因。
我找不到任何重叠的地方，你能拍一张截图吗？嗨，维克多，我在原始postHi中添加了两张截图。很遗憾，它没有更正；我没有替换他用你的版本编写代码，但它仍然显示为相同的版本；不幸的是，它没有工作，并且与以前的版本相同；但是，这次它通过选择左侧的第三个版本来影响过滤器；我已将该文件上载给你，以便你能够看到我的意思。如果你同意，请将文件发送给我，以便我可以在本地主机中测试没问题，我真的很感谢你在这方面的帮助；我现在就把它们发送给你。我已经把它们发送到你的gmail上了，因为我不能在这里发送它们
'When Images Ready!! item Height::' 267