Question

我正在尝试使用jQuery创建一个图像查看器，并遇到了一个问题，到目前为止我一直无法修复。图像查看器非常基本，顶部有一个大图像，下面有6个小图像。当用户点击其中一个小图像时，大图像src变为小图像。此外，还有一个按钮，单击该按钮可动态添加新的小图像。所有这一切都很好。

在我决定添加滚动效果后，问题就出现了，这样当生成新图像时，页面会自动向下滚动，以便您可以看到它。这使用户不必手动操作。我有这个工作但似乎在某些情况下导致手动滚动问题。我的意思是，有时在我添加图像并向下滚动到它之后，我无法使用鼠标滚轮手动向上滚动。

有时它会响应鼠标滚轮，但只能延迟一段时间，持续时间可达1-20秒。当它没有响应鼠标滚轮时，我尝试侧滚动条，这有时会起作用，有时会卡住，不允许我上下移动。我发现如果我逐个添加图像，等待它们完全加载，那么通常没有任何问题。但是，如果我继续快速连续按下添加新图像按钮，那么问题似乎就会发生。我还发现，如果我等待足够长时间，问题似乎消失了，这让我觉得它是由于我的滚动效果太慢而我的浏览器不得不等待它完成，直到它让我手动滚动。

我已经考虑在按下后禁用添加图像按钮，以便新图像可以加载，并且可以在添加另一个新图像之前进行滚动，但我希望有另一个解决方案。

任何帮助或指示都将不胜感激。感谢

Link to live demo

HTML

<div id="container">

    <button>Add<br>Images</button>

    <div id="large-image-wrap">
        <img src="http://bilal.cu.cc/images/profile_covers/profile_cover36.jpg">
    </div>

    <div id="small-images-wrap" class="clearfix">
        <div class="si-box"><img src="http://bilal.cu.cc/images/profile_covers/profile_cover36.jpg"></div>
        <div class="si-box"><img src="http://bilal.cu.cc/images/profile_covers/profile_cover64.jpg"></div>
        <div class="si-box"><img src="http://bilal.cu.cc/images/profile_covers/profile_cover44.jpg"></div>
        <div class="si-box"><img src="http://bilal.cu.cc/images/profile_covers/profile_cover45.jpg"></div>
        <div class="si-box"><img src="http://bilal.cu.cc/images/profile_covers/profile_cover31.jpg"></div>
        <div class="si-box"><img src="http://bilal.cu.cc/images/profile_covers/profile_cover65.jpg"></div>
    </div>

</div>

CSS

#container{
width:960px;
margin:0 auto 20px auto;
position:relative;
}

button{
position:fixed;
margin-left:-105px;
margin-top:19px;
width:100px;
text-transform:uppercase;
text-align:center;
font-weight:bold;
}

#large-image-wrap{
width:960px;
height:320px;
position:fixed;
z-index:10;
}

#large-image-wrap img{
width:100%;
height:auto;
border-top:20px solid white;
border-bottom:13px solid white;
}

#small-images-wrap{
width:960px;
position:relative;
top:353px;
}

.si-box{
width:32%;
height:auto;
float:left;
margin-bottom:1%;
}

.si-box img{
width:100%;
height:auto;
}

div.si-box:nth-child(2), div.si-box:nth-child(3n+2){
margin:0 2%;
}

的jQuery

$(document).ready(function(){

    var imgNum = 1; 

    // Add new image
    $("button").on("click", function(){
        if(imgNum > 70){imgNum = 1};
        $("#small-images-wrap div:last-of-type").after('<div class="si-box"><img src="http://bilal.cu.cc/images/profile_covers/profile_cover'+ imgNum +'.jpg"></div>');
        imgNum++;

        // Scroll to added image
        $('html, body').animate({scrollTop: $("#small-images-wrap div:last-of-type").offset().top}, 2000);
    });

    // On click effect
    $(document).on('click', '.si-box img',  function () {
        var $imgSrc = $(this).attr("src");
        $("#large-image-wrap img").attr("src", $imgSrc);
    });

}); // Document Ready End

jQuery滚动效果导致手动滚动问题

0 个答案: