Question

我有这个代码，用于显示合作伙伴徽标的响应式图像滑块。

有时，它随机停止工作，我刷新页面几次并再次工作，所以我不确定问题是什么。这是它停止工作时的样子。 https://i.scrny.me/ot1N.png

这是我正在使用的JavaScript代码。

$(function() {
var partnerSlider = $('.partners'),
    partners = partnerSlider.children().length,
    width, partnerHeight, containerWidth, windowSize, columns = 4;

//Making it responsive and all
$(window).on("load resize", function(){
    containerWidth = $('.container').width();
    windowSize = $(window).width();
    if (windowSize >= 992) {
        columns = 4;
    }
    else if (windowSize >= 768 && windowSize < 992) {
        columns = 3;
    }
    else if (windowSize < 768) {
        columns = 2;
    }

    $('#partners').css('width', containerWidth);
    $('.partner').css('width', containerWidth / columns);
    width = containerWidth / columns;
    partnerHeight = $('.partner > img').height() + 20;
    partnerSlider.css({width: (partners * width), height: partnerHeight});
});

var rotating = true;
var sliderSpeed = 4000;
var seePartners = setInterval(slidePartners, sliderSpeed);

$(document).on({
    mouseenter: function () {
        rotating = false;
    },
    mouseleave: function () {
        rotating = true;
    }
}, '.partners');

function slidePartners() {
    if (rotating !== false) {
        var first = $('.partner:first');
        first.animate({'margin-left': '-'  + width + 'px'}, 1000, function () {
            first.remove().css({'margin-left': '0px'});
            $('.partner:last').after(first);
        });
    }
}

});

据我设法找出问题来自这一部分。

$(window).on("load resize", function(){
containerWidth = $('.container').width();
windowSize = $(window).width();
if (windowSize >= 992) {
    columns = 4;
}
else if (windowSize >= 768 && windowSize < 992) {
    columns = 3;
}
else if (windowSize < 768) {
    columns = 2;
}

$('#partners').css('width', containerWidth);
$('.partner').css('width', containerWidth / columns);
width = containerWidth / columns;
partnerHeight = $('.partner > img').height() + 20;
partnerSlider.css({width: (partners * width), height: partnerHeight});
});

该功能是为了在页面加载或调整大小时运行我相信但有时当页面加载时它不会运行，所以它不会自动分配图像和容器的大小。

这是HTML

<div class="container wow fadeIn" style="overflow:hidden;">
    <h2>Partners</h2>
    <div class="partners">
        <div class="partner">
            <img src="assets/images/sponsor.png" class="img-responsive"/>
        </div>
        <div class="partner">
            <img src="assets/images/sponsor.png" class="img-responsive"/>
        </div>
        <div class="partner">
            <img src="assets/images/sponsor.png" class="img-responsive"/>
        </div>
        <div class="partner">
            <img src="assets/images/sponsor.png" class="img-responsive"/>
        </div>
        <div class="partner">
            <img src="assets/images/sponsor.png" class="img-responsive"/>
        </div>
        <div class="partner">
            <img src="assets/images/sponsor.png" class="img-responsive"/>
        </div>
        <div class="partner">
            <img src="assets/images/sponsor.png" class="img-responsive"/>
        </div>
    </div>
</div>

任何帮助将不胜感激。

Answer 1

我相信您的代码问题与您拥有的jQuery版本有关。有时在jQuery 3.x.x版本中（不确定何时确切）进行了更改以使on ready事件处理程序异步运行。这意味着可能存在on load事件在ready事件被触发之前完成的情况。在您的情况下，这会成为一个问题，因为如果在调用load之前触发了ready事件，则在jQuery＆＃39; s window.load中注册的document.ready()事件处理程序将不跑。这个序列可能取决于许多因素，例如页面加载的速度，图像缓存......，这就是为什么你看到问题发生不一致的原因。

解决方案是更新您拥有的代码并将$(window).('on')事件处理程序移到docuemnt.ready函数之外：$(function(){})。另外，由于我没有在您提供的jsFiddle中看到它，请确保js代码的脚本嵌入了<body>元素，因为这是放置影响渲染的代码的理想位置。页面。

我已更新提供的内容以包含这些更改，请查看：

<强> Updated jsFiddle

加载jquery窗口并调整大小不运行

1 个答案: