时间戳

首页 > 解决方案 > 投资组合图像在初始加载时相互叠加

html - 投资组合图像在初始加载时相互叠加

问题描述

作为比开发人员更多的 UX 设计师，我希望有人可以帮助我解决我在网站设计中遇到的问题。我在以下地址创建了一个站点：

www.imaginationcreation.co.uk/website2

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

谁能帮我; 如果需要，我可以提供文件

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

谢谢

标签： htmlbootstrap-4jquery-isotope

解决方案

我认为您正在将此插件用于投资组合部分。
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 显示得很好。所以，让我们在第一次加载页面时触发点击事件！

尝试更新到：

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花费了更多的时间来加载图像。这就是问题发生的原因。

推荐阅读