有没有比使用scrollingParallax插件在页面上滚动图像更好的方法

Question

我有34张照片，我想使用javascript滚动速度比页面略快，而我目前正在使用scrollingParallax插件来做到这一点。 但是，当我切换到ipad进行查看时，它会变得很粗略！ 我想让网站具有响应性，因为我的妈妈只会在那儿浏览它！ 我想知道这是由于我的编码效率低下，旧的插件还是只是我当普拉特而引起的！

我实际上是在该插件中循环了34次，我确定这不是很有效，但是时间有限，并且理解我以为我会把它扔成所有知识stackoverflow的字体！

这是我正在使用的循环：

/* Photo sprite alignment and scroll   */
for(var i=0; i<34; i++){
var j = '#photo' + (i+1);
$(j).scrollingParallax({staticSpeed : 2.2,staticScrollLimit : false, loopIt : false});
};

CSS的几张照片：

.photos{position: fixed; z-index:-1;}

#photo1{top:900px; left:10px;}
#photo2{top:1100px; right:10px;}
#photo3{top:1300px; left:10px;}
#photo4{top:1500px; right:10px;}
#photo5{top:1700px; left:10px;}
#photo6{top:1900px; right:10px;}
#photo7{top:2100px; left:10px;}
#photo8{top:2300px; right:10px;}

一些照片的HTML：

<div class="photos">
<img src="img/1.png" id="photo1">
<img src="img/2.png" id="photo2">
<img src="img/3.png" id="photo3">

非常感谢您的帮助！

Answer 1

Shmiddty提供了更好的方法来调用该函数，但最终iOS只是没有足够快地运行jquery scrollingParrallax，所以我最终在iOS上隐藏了该类。

//优化：将引用存储在事件处理程序之外：var $ window = $（window）;

function checkWidth() {
    var windowsize = $window.width();
    if (windowsize > 1250) {
        //if the window is greater than 1250px wide then turn on parallax scrolling..
                    $('.fixedPhotos').addClass('hidden');
                    $('.photos img').removeClass('hidden');
            }else{
                    $('.fixedPhotos').removeClass('hidden');
                    $('.photos img').addClass('hidden');
            }
}
// Execute on load
checkWidth();
// Bind event listener
$(window).resize(checkWidth);