有沒有比使用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);