当 float:left 在 EE2 中使用一些繁重的 JavaScript 时，滚动速度非常慢(浏览器原生)

Question

所以我在表达式引擎2中创建了一个图库，坦率地说，我不太了解，所以我使用了很多javascript来弥补它（如果你建议任何更简单的方法，我会永远爱你）

奇怪的是，当我使用带有图片的块链接上的浮动时，页面上的滚动开始变得疯狂。

<a href="#" class="popthisshit photoins" style=""><img height="170" src="'+quitenice[i]+'"></a>

我已经非常精确地隔离了这一点：

.photoins{ display:block; border:1px solid #666; height:140px; width:140px; overflow:hidden; margin:0px 0px 20px 20px; float:left;}
.photoins img{text-align:center; height: 240px; margin:-50% -50%;}

一旦我使用float：left;页面停止正常滚动。删除它，它很好..__

这是代码[不要成为hatin plzktnx]

我首先从频道中的照片创建数组：

{exp:channel:entries channel="galleries" disable="categories|category_fields|custom_fields|member_data|pagination" limit="1" status="open|closed"}
<script> 
var quitenice = new Array('{gallery_photos}{row_photo} ', '{/gallery_photos}');

但是哦，为什么y，你可能会在远处大喊大叫..由于以下原因：在这里，我创建了假分页以避免使用它，因为它被证明更重。

var zero = 0;
var size = 25;
var somecount = 0;
for (var i=zero; i<size; i+=1) {
    somecount+=1;
    document.write('<a href="#" class="popthisshit photoins" style=""><img height="170" src="'+quitenice[i]+'"></a>');
};
var newzero=zero+size; 
var newsize = size+newzero;

所以现在我们得到了第一组25张图片。这是图片锚

点

document.write('<a href="#" class="morePics"></a>');

而且，这是无限滚动：

$(function () {
             var $win = $(window);
             $win.scroll(function () {
                 if ($win.height() + $win.scrollTop() == $(document).height()) {
                    if(quitenice.length >=newsize){ 
                        for (var ii=newzero; ii<newsize; ii+=1) {
                            $('.morePics').before('<a href="#" class="popthisshit photoins"><img src="'+quitenice[ii]+'"></a>');        
                        };
                        newzero += size;
                        newsize +=size;
                    }else{  
                        for (var ii=newzero; ii< quitenice.length-1; ii+=1) {
                            $(this).before('<a href="#" class="popthisshit photoins"><img src="'+quitenice[ii]+'"></a>');
                        };
                        $('.morePics').before('<span class="ender"></span>');
                        newzero += size;
                        newsize +=size;
                    }; 
                 }
             });
         });
</script>
{/exp:channel:entries}

所以去掉浮点数：左，它滚动得很好，但随后在javascript中添加一堆位置：绝对似乎更倒退了。

我使用一堆带有 1.8.0 jQuery 的子库。我试图改变它和其他一切，但正是浮标：左边使它有问题。帮助。

PS：Popthisshit叫超灯箱，也和问题关系不大！

Answer 1

我在

编写无限滚动脚本时遇到了同样的问题。问题是滚动事件在每个滚动中的每个小 steo 上触发。我在Airbnb的InfinityJS中找到的解决方案是使用设置为~500的间隔来检查自上次间隔以来滚动的差异。然后根据scrollY运行shouldShow方法

var prevScroll = -1
window.setInterval(function () {
    currScroll = window.scrollY
    if (currScroll != prevScroll) {
        // check
    }
})